javascript - 使用 Javascript 中断 Mac 平滑滚动

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

简而言之:不要试图覆盖 native 滚动。每个操作系统和设备处理事情的方式不同，并且不可能预测不同的场景。有“硬滚动”(大多数 Windows 版本)、“软滚动”(≈Mac OS X 10.6+)和仅在滚动完成时触发 onscroll 事件的浏览器 (iOS)。一团糟。

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

// 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)'
    });
});