jQuery scrollTop 直到滚动后才更新

Posted 2023-03-14

【中文标题】jQuery scrollTop 直到滚动后才更新

【英文标题】：jQuery scrollTop not updating until after scroll

【发布时间】：2015-02-17 09:42:16

【问题描述】：

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

我有一个简单的整页滚动站点，我尝试在其中模拟位置：通过使用 jQuery scrollTop 在页面滚动时应用top 值来固定某些元素。

此过程在 Chrome 和 FF 中运行良好，但在 Safari（桌面和 ios）以及 Chrome（android）中，滚动非常生涩。

我在桌面上检查了 Safari 中的代码，似乎与 Chrome 和 FF 不同，scrollTop 值直到滚动完成后才会应用于top，这会导致抖动.

这是可以纠正的吗？

这是我正在使用的小型 JS sn-p，以及指向示例的链接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
    );

);

【参考方案1】：

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

在某些旧版 chrome 浏览器中，您可以在设置中启用平滑滚动。 使用平滑滚动插件。 摆脱 $(window).scroll 并创建一个每 1-2 毫秒触发一次的函数

【讨论】：

感谢您的提示。 JS 不是我的强项，我该如何创建一个每隔几毫秒触发一次的新函数？

@DeanElliott 看看***.com/questions/26272506/…