1

我有一个脚本可以监视滚动并控制滚动以根据某些参数为页面设置动画。为此，它调用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');
     }
);
4

1 回答 1

2

简而言之：不要试图覆盖原生滚动。每个操作系统和设备处理事情的方式都不同，并且无法预测不同的场景。有“硬滚动”（大多数 Windows 版本）、“软滚动”（≈Mac OS X 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)'
    });
});
于 2012-12-04T18:26:04.993 回答