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

つまり、ネイティブのスクロールをオーバーライドしようとしないでください。すべての OS とデバイスは処理方法が異なり、さまざまなシナリオを予測することは不可能です。「ハード スクロール」(ほとんどの Windows バージョン)、「ソフト スクロール」(≈Mac OS X 10.6+)、およびスクロールが完全に完了したときにのみ onscroll イベントを発生させるブラウザー (iOS) があります。それは混乱です。

bodyのスクロール動作を変更しようとする代わりに、それに応じてページの要素を変更します。onscroll-event をリッスンし、Web ページ上で物を動かします。

// 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 に答える