jquery - jqueryでスクロールされたpxの数を決定する方法は?

Question

pxjQueryでスクロールしたときの値を取得したい。

たとえば、ページの途中で、少し下にスクロールします。pxここで、何回スクロールしたか知りたいです。(3px, 5px, ..., 10px, 11px ?)

スクローラーの位置は何でも。

私のスクローラーが上から300pxの場合。10pxスクロールしました。私のスクローラーは現在310pxです。スクロールした値を取得する方法 (ここでは : 10px ?)

出来ますか ？

Answer 1

実用的なサンプルコードは次のとおりです。

var startScroll,
    toHandler,
    endScroll;

$(window).on("scroll",function(){
    if (!startScroll) {
        startScroll = $(window).scrollTop();
        console.log("Started:" + startScroll);
    } else {
        if (toHandler) {
            clearTimeout(toHandler)
        }
        toHandler = setTimeout(function(){
            endScroll = $(window).scrollTop();
            console.log("Ended :"+endScroll);
            console.log("Scrolled "+(endScroll-startScroll));
            startScroll = 0;
        },200)
    }
});​

http://jsfiddle.net/Touki/jXwAG/

スクロールイベントが複数回発生するのを防ぎ、誤った値を取得するには、タイムアウトが必要です。

このサンプルは、200ミリ秒後に移動したピクセル数を出力します