Question

我正在修改我的网站，可以在http://beta.namanyayg.com/上找到新的网站

网站上滚动主要有两件事：

要检查用户所在的“页面”，请计算最高偏移量和滚动位置，然后在页面中添加一个类。
要在菜单上平滑滚动，请单击。

我已经为两者编写了代码，但是存在很多延迟。

第一个几乎总是导致滞后。结果，第二个也是滞后的。我已经包含了一个布尔值来检查它是否平滑滚动并禁用了正常的滚动事件，但是没有太大的变化。

您对如何提高性能有任何建议吗？因此没有（或至少更少）延迟？先感谢您！：）

......或者它与JS根本没有关系？我已经优化了其他所有内容......

编辑：未http://beta.namanyayg.com/js/main.js

的JS

Answer 1

如果你使用underscore，它有一个很棒的_.debounce功能，非常适合这类事情。

Answer 2

通过以下方式检查用户从页面顶部滚动了多少（即他当前在哪个“页面”）：

$(window).scroll(function () { 
    var scrollAmount = $(window).scrollTop(); // in pixels

    if(scrollAmount > SOME_AMOUNT)
    {
       // add required css class
    }
});

要平滑滚动，例如某个ID，您可以使用：

$("html, body").animate({ scrollTop: $("#someID").scrollTop() }, 1000);

这些都是jQuery解决方案，所以你应该包含jquery库。还有一个名为waypoints的jQuery插件可以执行这些计算。它可能对您有用，它还有一些其他不错的功能和示例。

Answer 3

我有同样的问题。我有一个可滚动的div，有数千个较小的div。每当我调用scrollTop来获取滚动位置或设置它时，它有时会等待至少1秒。

我阅读了这些幻灯片：http://www.slideshare.net/nzakas/high-performance-javascript-2011（特别是幻灯片138-139），现在我意识到每次调用scrollTop，即使是作为一个getter，也会使javascript重新布局页面。这很可能是造成延迟的原因，但不幸的是我还没有找到解决方案，就像调用scrollTop而不会导致重新布局一样。

注意：我只是在Chrome上进行测试。

另请阅读本文的“浏览器很聪明”部分：http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

Answer 4

我通过获取scrollTop找到了一个简单的滞后解决方案，只需在滚动处理程序中调用它并将结果保存在变量中。

例如在jQuery中：

var scrollPos = 0,
    element = $('.class');

element.scroll(function(){
    scrollPos = element.scrollTop();  
});

对于第二个问题，设置scrollTop，我通过仅显示可见元素来减少DOM元素的数量。在您的情况下，请确保仅将可见页面添加到DOM。当滚动到下一页时，在滚动处理程序中删除顶部的一个（使用jQuery .detach）并将下一个附加到DOM。

如何提高JS滚动性能？

4 个答案: