javascript - jQuery scrollTop 直到滚动后才更新

Question

我遇到了一个奇怪的问题，我正在努力解决。

我有一个简单的整页滚动网站，我试图通过使用 jQuery scrollTop 在页面滚动时应用 top 值来模仿 position:fixed 在某些元素上。

p>

此过程在 Chrome 和 FF 中运行良好，但在 Safari(桌面和 iOS)以及 Chrome (Android) 中滚动非常不稳定。

我已经在桌面上检查了 Safari 中的代码，看起来与 Chrome 和 FF 不同，scrollTop 值直到之后才应用于 top滚动已经完成，这导致了抖动。

这是可以纠正的吗？

这是我正在使用的小 JS 片段，以及指向示例的链接 Fiddle

var fullHeight = $(window).height();
$('.panel').height(fullHeight);

$(window).scroll(function () {

    var text = $('.text');
    var textOffset = text.offset();
    var textViewOffset = $(document).scrollTop();

    $('.text').css({
        'top': textViewOffset
    });
    $('.panel:nth-child(2) .text').css({
        'margin-top': -fullHeight
    });
    $('.panel:nth-child(3) .text').css({
        'margin-top': (-fullHeight) * 2
    });

});

Answer 1

尝试 $(window).scroll(function () { console.log('scrolled'); }); 你会发现它在 chrome 中只记录一次，在 chrome 中更频繁firefox，就是这个问题。

1. 在一些旧的 chrome 浏览器中，您可以在设置中启用 smoothscroll。
2. 使用 smoothscroll 插件。
3. 摆脱 $(window).scroll 并制作一个每 1-2 毫秒触发一次的函数