可以使用 Window.Onscroll 方法来检测滚动方向吗?

IT技术 javascript
2021-03-02 00:20:48

可以使用 Window.Onscroll 方法来检测滚动方向吗?

3个回答

如果您在页面加载时以及每次发生滚动事件时记录 scrollX 和 scrollY,那么您可以将以前的值与新值进行比较,以了解您滚动的方向。这是一个概念证明:

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
+1:这也是我要说的。我唯一要补充的是,可能有某种输入设备可以让您自由滚动(不限于 X 或 Y),因此我会将一个大 IF 分成两个。如果它是第一个滚动条,您也可以假设它是向下滚动或向右滚动。此外,您可能需要检查页内链接会发生什么(例如:href="#top")。
2021-04-22 00:20:48
我认为您可以获得事件的时间戳。找出两个连续事件之间的差异,并将上面计算的差异除以时间戳差异。
2021-04-29 00:20:48
真的很好用!想知道我如何能够计算滚动速度?
2021-05-13 00:20:48

使用 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]);
});

然后,而不是scroll,绑定到custom_scroll

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

我在 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​