比 $(window).scroll 更快的替代品？

Question

我注意到 $(window).scroll 的 jQuery 滚动绑定往往会使页面滞后很多。例如，当我使用以下脚本滚动经过它们时，我的页面上的元素会更改样式：

$(window).scroll(function() {
     var bottom_of_window = $(window).scrollTop() + $(window).height();
     $('.ElementsToBeChanged').each(function() { 
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                //Add my styles
            }
        });

});

可以理解的是，它使网站变得迟钝，因为它不断滚动运行，但我还没有遇到任何替代方法来在对象滚动过去时触发事件。这些在滚动时触发事件的网站似乎很常见；他们用什么来绕过这种滞后？

Answer 1

降低您性能的不是滚动函数本身，而是您在每个滚动事件中对每个项目进行大量计算这一事实。

但尽管如此，在屏幕上显示 20 个元素时，我并未发现性能有任何下降。

尝试将您的 window 对象缓存为变量 [例如：win = $(window)] 并在每个函数中使用 el 而不是 this。

与其直接使用 jQuery 更改 css，不如尝试 adding/removing 类。

不要像其他人提到的那样使用 denounce，因为在您停止滚动之前它不会触发。您要找的是 throttling.

这是我想出的，它在我的 PC 上与 20 个元素配合得很好：

var win = $(window);

win.scroll(function() {
     var bottom_of_window = win.scrollTop() + win.height();
     $('.ElementsToBeChanged').each(function(index,el) { 
            var bottom_of_object = $(el).offset().top + $(el).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(el).addClass('red');
            }else{
              $(el).removeClass('red');
            }
        });

});

.ElementsToBeChanged{
  margin:100px;
  height:200px;
  border:1px solid black;
  transition:2s;
}

.ElementsToBeChanged.red{
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>
<div class="ElementsToBeChanged">.ElementsToBeChanged</div>

最后，只需要使用插件，例如Skrollr.js or ScrollMagic

比 $(window).scroll 更快的替代品？

Faster alternative to $(window).scroll?

html

javascript

jquery

lag