Javascript 可以使用Window.Onscroll方法检测滚动方向吗？

是否可以使用Window.Onscroll方法检测滚动方向？

如果在页面加载时记录scrollX和scroll，并且每次发生滚动事件，则可以将以前的值与新值进行比较，以了解滚动方向。以下是概念证明：

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

函数scrollFunc（e）{ if（typeof scrollFunc.x==“未定义”）{ scrollFunc.x=window.pageXOffset； scrollFunc.y=window.pageYOffset； } var diffX=scrollFunc.x-window.pageXOffset； var diffY=scrollFunc.y-window.pageYOffset； if（diffX0）{ //向左滚动 }else if（diffY0）{ //向上滚动 }否则{ //第一个滚动事件 } scrollFunc.x=window.pageXOffset； scrollFunc.y=window.pageYOffset； } window.onscroll=scrollFunc

---

我在ie8中很难做到这一点（尽管它与ie9、FF和Chrome兼容）-所有卷轴似乎都被检测为水平

下面是一个经过修改的脚本，它也可以在ie8中使用，可能会覆盖更多的浏览器

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​

函数scrollFunc（e）{ 函数getMethod（）{ 变量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； } 返回[x，y]； } var xy=getMethod（）； var xMethod=xy[0]； var yMethod=xy[1]； if（typeof scrollFunc.x==“未定义”）{ scrollFunc.x=xMethod； scrollFunc.y=y方法； } var diffX=scrollFunc.x-xMethod； var diffY=滚动函数y-yMethod； if（diffX0）{ //向左滚动 }else if（diffY0）{ //向上滚动 }否则{ //第一个滚动事件 } scrollFunc.x=xMethod； scrollFunc.y=y方法； } window.onscroll=scrollFunc​

---

使用jquery，还可以注册自定义滚动事件，该事件将滚动更改作为参数提供给事件处理程序：

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);
});

---

+1：这也是我要说的。我唯一需要补充的是，可能有某种输入设备可以让你自由滚动（不限于X或Y），所以我会把一个大IF分成两个。如果它是第一个滚动条，你也可以假设它向下或向右滚动。此外，您可能需要检查页面内链接（例如：href=“#top”）。效果非常好！想知道我如何计算滚动的速度？我想你可以得到事件的时间戳。找出两个连续事件之间的差异，并将上面计算的差异除以时间戳差异。