Question

我有一个监视滚动的脚本，并控制滚动以根据某些参数设置页面动画。为此，它调用window.scrollTo(0, currentScrollTop);，这完全中断了Windows上Firefox的平滑滚动。然后我可以将页面滚动到我想要的地方。

不幸的是，这个技巧似乎不适用于MacOS中的浏览器，因为JavaScript和浏览器竞相滚动窗口会导致体验不佳。

是否有跨浏览器方式停止使用JavaScript进行平滑滚动？

使用相关效果的网站：http://capitalismis.com

相关（简化）代码：

$doc.on('scroll', function(e)
    {
        $doc.off('scroll');

        window.scrollTo(0, $doc.scrollTop());

        var aniSpeed = 1500 * Math.abs(scrollTop - selected.top) / windowHeight;

        $body
            .stop()
            .animate({scrollTop: selected.top}, aniSpeed, 'easeOutQuad');
     }
);

Answer 1

简而言之：不要试图覆盖原生滚动。每个操作系统和设备都会以不同的方式处理事情，并且无法预测不同的场景。有“硬滚动”（大多数Windows版本），“软滚动”（≈MacOSX 10.6+）以及仅在滚动完成时触发onscroll事件的浏览器（iOS）。这是一团糟。

我不会尝试修改 body 的滚动行为，而是相应地修改页面的元素。收听onscroll-event，并在网页上移动。

// Capture scroll event
$(window).scroll( function() {

    // Get scroll offset from top
    var scrollTop = $(window).scrollTop();

    // Use it to move elements around on the page (or change backgrounds etc.)
    // Here: move .element in the opposite direction of the scroll
    $('.element').css({
        '-vendor-transform' : 'translate3d(' + (scrollTop*(-1)) + 'px,0,0)'
    });
});

使用Javascript中断Mac平滑滚动

1 个答案: