0

当用户滚动页面时，我想向下滑动一个 div 直到它到达它的最终位置，然后让浏览器像往常一样滚动。

我的第一个想法就是在滚动事件中重置 scrollTop，如下所示：

$(window).scroll(function() {
    // 0 is the final position for `main`,
    // Initially set to -390px
    if(parseInt($('main').css('top')) < 0) {
        $(window).scrollTop(0); // <-------- nothing should happen

        // ... more stuff
    }
});

在 Firefox 中运行良好。但是当我在 Safari 中测试时，它会导致可怕的“反弹效应”。
显然是因为 Safari 首先向下滚动，然后由于我的scrollTop(0).

好的，另一种解决方案。为什么不设置position: fixed为htmland body？例子：

$(window).scroll(function() {
    if(parseInt($('main').css('top')) < 0) {
        $('html, body').css('position', 'fixed'); // <-------- next try

        // ... more stuff
    }
});

知道了！在 Safari 中运行良好，让我们检查一下 Firefox，然后……什么也没有发生！Firefox 只触发一次滚动事件，直到我将 html 和 body 设置为固定。

所以这是我的问题：如何避免垂直滚动跨浏览器，没有光学副作用并且仍然得到滚动事件？

4

0 回答 0