Question

我有一个奇怪的问题，我正在努力弄明白。

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

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

我在桌面上检查过Safari中的代码，看起来与Chrome＆amp; 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中记录一次，而在firefox中更常见，这就是问题所在。

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

jQuery scrollTop直到滚动后才更新

1 个答案: