Window.Onscrollメソッドを使用してスクロール方向の検出を含めることはできますか？

Question

Window.Onscrollメソッドを使用してスクロール方向の検出を含めることはできますか？

Answer 1

ページの読み込み時に、スクロールイベントが発生するたびにscrollXとscrollYを記録すると、以前の値と新しい値を比較してスクロールした方向を知ることができます。ここでは概念の証明だ。（それはIE9、FFとChromeのための準拠していますが）

function scrollFunc(e) { 
    if (typeof scrollFunc.x == 'undefined') { 
     scrollFunc.x=window.pageXOffset; 
     scrollFunc.y=window.pageYOffset; 
    } 
    var diffX=scrollFunc.x-window.pageXOffset; 
    var diffY=scrollFunc.y-window.pageYOffset; 

    if(diffX<0) { 
     // Scroll right 
    } else if(diffX>0) { 
     // Scroll left 
    } else if(diffY<0) { 
     // Scroll down 
    } else if(diffY>0) { 
     // Scroll up 
    } else { 
     // First scroll event 
    } 
    scrollFunc.x=window.pageXOffset; 
    scrollFunc.y=window.pageYOffset; 
} 
window.onscroll=scrollFunc 

Answer 2

私はトラブルIE8でこの作品を作っていた - すべてのスクロールは、水平方向として検出しているように見えます。

変更されたスクリプトdemoは、ie8で動作し、さらにいくつかのブラウザをカバーします。 jQueryを使って

function scrollFunc(e) { 

    function getMethod() { 
     var x = 0, y = 0; 
     if (typeof(window.pageYOffset) == 'number') { 
      x = window.pageXOffset; 
      y = window.pageYOffset; 
     } 

     else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) { 
      x = document.body.scrollLeft; 
      y = document.body.scrollTop; 
     } 

     else if(document.documentElement && (document.documentElement.scrollLeft ||  document.documentElement.scrollTop)) { 
      x = document.documentElement.scrollLeft; 
      y = document.documentElement.scrollTop; 
     } 

     return [x, y]; 
    } 

    var xy = getMethod();    
    var xMethod = xy[0];   
    var yMethod = xy[1]; 

    if (typeof scrollFunc.x == 'undefined') { 
     scrollFunc.x = xMethod; 
     scrollFunc.y = yMethod; 
    } 

    var diffX = scrollFunc.x - xMethod; 
    var diffY = scrollFunc.y - yMethod; 


    if(diffX<0) { 
     // Scroll right 
    } else if(diffX>0) { 
     // Scroll left 
    } else if(diffY<0) { 
     // Scroll down 
    } else if(diffY>0) { 
     // Scroll up 
    } else { 
     // First scroll event 
    } 
    scrollFunc.x = xMethod; 
    scrollFunc.y = yMethod; 
} 

window.onscroll=scrollFunc​ 

Answer 3

、あなたはまた、イベントハンドラの引数として、スクロールの変化を提供するカスタムスクロールイベント登録できます

： custom_scrollに結合し、そして、代わりの scroll

var previous_scroll = $(window).scrollTop(); 

$(window).on('scroll', function() { 
    var scroll = $(window).scrollTop(), 
     scroll_change = scroll - previous_scroll; 
    previous_scroll = scroll; 
    $(window).trigger('custom_scroll', [scroll_change]); 
}); 

を

$(window).on('custom_scroll', function pos(e, scroll_change) { 
    console.log(scroll_change); 
});