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

Question

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

$(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 对象缓存为变量 [ex: win = $(window)] 并使用每个函数中的 el 这个。

与其直接使用 jQuery 更改您的 css，不如尝试添加/删除类。

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

这是我想出的，它适用于我电脑上的 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或 ScrollMagic