4

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

网站上与滚动相关的主要有两件事：

  • 要检查用户在哪个“页面”上，通过计算顶部偏移量和滚动位置，然后向页面添加一个类。
  • 平滑滚动菜单点击。

我已经为两者编写了代码，但是有很多 lag。

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

您对如何提高性能有任何建议，以便没有（或至少更少）滞后？先感谢您！:)

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

编辑：http : //beta.namanyayg.com/js/main.js 上的未缩小 JS

4

4 回答 4

2

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

于 2013-07-12T13:43:13.310 回答
1

要检查用户从页面顶部滚动了多少（即他现在在哪个“页面”上），可以通过以下方式实现：

$(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 库。还有一个很好的 jQuery 插件，叫做waypoints来执行这些计算。它可能对您有用，并且它还有一些其他不错的功能和示例。

于 2012-12-30T09:42:00.847 回答
0

我也有同样的问题。我有一个带有数千个较小 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/

于 2013-07-12T12:54:56.227 回答
0

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

例如在 jQuery 中：

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

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

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

于 2013-07-16T13:03:15.237 回答