1

スムーズなスクロールを模倣するために、 Web サイトで次のコードを使用しています。

function scrollWindow() {
    // window.scrollBy(1040,0)
    var timerID = setInterval(function() {
        window.scrollBy(104, 0);
        if( window.pageXOffset >= 1040 ) clearInterval(timerID);
    }, 10);
}

ただし、スクロール (scrollWindow 関数) をクリックすると、ページは本来のように 1040 スクロールします。

手動で最初にスクロールしない限り、それ以降は機能しません。

1040に移動していませんが、ページのその時点を過ぎてif( window.pageXOffset >= 1040 )いるため、キャンセルしていると考えるのは正しいでしょうか?

もしそうなら、どうすればこれを解決できますか？

4

1 に答える 1

1

はい、あなたの評価は正しいです。ただし、アプローチをひねることで修正できます。

function scrollWindow() {
    var scrolledSoFar = 0;
    var scrollStep = 104;
    var scrollEnd  = 1040;
    var timerID = setInterval(function() {
        window.scrollBy(scrollStep, 0);
        scrolledSoFar += scrollStep;
        if( scrolledSoFar >= scrollEnd ) clearInterval(timerID);
    }, 10);
}

更新コードのもう 1 つの落とし穴は、条件をチェックする前に
実行していることです。scrollByしたがって、あなたのページでは、1040 を超えてスクロールした後でも、クリックscrollするとページが 1 つ移動しますscrollStep。それを防ぐには、次の順序が適しています。

function scrollWindow() {
    var scrolledSoFar = 0;
    var scrollStep = 104;
    var scrollEnd  = 1040;
    var timerID = setInterval(function() {
        if( scrolledSoFar < scrollEnd ) {
            window.scrollBy(scrollStep, 0);
            scrolledSoFar += scrollStep;
        } else {
            clearInterval(timerID);
        }
    }, 10);
}
于 2012-06-26T19:59:33.103 に答える