慢滚动紧张

我正在使用此代码： 示例

根据“image-ul”是否完全位于浏览器窗口的下边缘之上，将使div以不同的速度滚动，就像它应该的那样。 但我遇到的问题是当慢速滚动div到达靠近页面顶部的位置时滚动不顺畅。 它们似乎停了一会儿，甚至有时会向相反的方向滚动。

// // default speed ist the lowest valid scroll speed. // var default_speed = 1; // // speed increments defines the increase/decrease of the acceleration // between current scroll speed and data-scroll-speed // var speed_increment = 0.01; // // maximum scroll speed of the elements // var data_scroll_speed_a = 3; // #sloganenglish var data_scroll_speed_b = 5; // #image-ul // // // var increase_speed, decrease_speed, target_speed, current_speed, speed_increments; $(document).ready(function() { $(window).on('load resize scroll', function() { var WindowScrollTop = $(this).scrollTop(), Div_one_top = $('#image-ul').offset().top, Div_one_height = $('#image-ul').outerHeight(true), Window_height = $(this).outerHeight(true); if (WindowScrollTop + Window_height >= (Div_one_top + Div_one_height)) { $('#sloganenglish').attr('data-scroll-speed', data_scroll_speed_a).attr('data-current-scroll-speed', default_speed).attr('data-speed-increments', data_scroll_speed_a * speed_increment); $('#image-ul').attr('data-scroll-speed', data_scroll_speed_b).attr('data-current-scroll-speed', default_speed).attr('data-speed-increments', data_scroll_speed_b * speed_increment); $('.slogan-a-line').css('color', 'yellow'); increase_speed = true; decrease_speed = false; } else { $('#sloganenglish').attr('data-scroll-speed', '1').attr('data-current-scroll-speed', default_speed); $('#image-ul').attr('data-scroll-speed', '1').attr('data-current-scroll-speed', default_speed); $('.slogan-a-line').css('color', 'red'); decrease_speed = true; increase_speed = false; } }).scroll(); }); // data-scroll-speed script $.fn.moveIt = function() { var $window = $(window); var instances = []; $(this).each(function() { instances.push(new moveItItem($(this))); }); window.onscroll = function() { var scrollTop = $window.scrollTop(); instances.forEach(function(inst) { inst.update(scrollTop); }); } } var moveItItem = function(el) { this.el = $(el); this.speed = parseInt(this.el.attr('data-scroll-speed')); this.current_speed = 1.0; }; moveItItem.prototype.update = function(scrollTop) { target_speed = parseInt(this.el.attr('data-scroll-speed')); current_speed = this.current_speed; speed_increments = parseFloat(this.el.attr('data-speed-increments')); if (increase_speed) { if (current_speed  default_speed) { current_speed -= speed_increments; } if ($(window).scrollTop() === 0) { current_speed = default_speed; } } this.current_speed = current_speed; var pos = scrollTop / this.current_speed; this.el.css('transform', 'translateY(' + -pos + 'px)'); }; // Initialization $(function() { $('[data-scroll-speed]').moveIt(); }); 

Answer 1

示例代码对我来说并不慢，因此它可能特定于您的计算机或浏览器。

但是，您可以执行以下操作：

1. 不要在不需要的地方使用jQuery。 jQuery比使用本机JS函数（例如document.getElementById ）慢得多。

2. 不要重复使用jQuery选择器。 每次使用jQuery选择器时，都会遇到性能损失。 例如，而不是这样：

    function(){ var Div_one_top = $('#image-ul').offset().top, Div_one_height = $('#image-ul').outerHeight(true); } 

做这个：

 var imageUl = $('#image-ul'); function(){ imageUl.offset().top, imageUl.outerHeight(true); } 

这个例子应该会提高性能。 每次页面无缘无故地滚动时，您都会执行多个jQuery选择器。

性能密集型产品的最佳选择是完全删除jQuery并手工完成。