为什么没有人使用滚动的jQuery返回的事件对象?

$window.on('scroll', function (event) {
    console.group('Scroll');
    console.info('Scroll event:', event);
    console.info('Position:', this.pageYOffset);
    console.info('Direction:', event.originalEvent.dir); // Here is the direction
    console.groupEnd();
});

我使用铬，我没有检查其他浏览器，如果他们有dir属性。

You can use this as well $(document).ready(function(){ var currentscroll_position = $(window).scrollTop(); $(window).on('scroll', function(){ Get_page_scroll_direction(); }); function Get_page_scroll_direction(){ var running_scroll_position = $(window).scrollTop(); if(running_scroll_position > currentscroll_position) { $('.direction_value').text('Scrolling Down Scripts'); } else { $('.direction_value').text('Scrolling Up Scripts'); } currentscroll_position = running_scroll_position; } }); .direction_value{ position: fixed; height: 30px; background-color: #333; color: #fff; text-align: center; z-index: 99; left: 0; top: 0; width: 100%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="direction_value"> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>

你应该试试这个

var scrl
$(window).scroll(function(){
        if($(window).scrollTop() < scrl){
            //some code while previous scroll
        }else{
            if($(window).scrollTop() > 200){
                //scroll while downward
            }else{//scroll while downward after some specific height
            }
        }
        scrl = $(window).scrollTop();
    });

检查当前的scrollTop和之前的scrollTop

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});

现有的解决方案

从这篇帖子和其他答案中可能有3个解决方案。

解决方案1

    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log('up 1');
        }
        else {
            console.log('down 1');
        }
        lastScrollTop = st;
    });

解决方案2

    $('body').on('DOMMouseScroll', function(e){
        if(e.originalEvent.detail < 0) {
            console.log('up 2');
        }
        else {
            console.log('down 2');
        }
    });

解决方案3

    $('body').on('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log('up 3');
        }
        else {
            console.log('down 3');
        }
    });

---

多浏览器测试

我无法在Safari上测试它

chrome 42 (Win 7)

解决方案1 向上:每次滚动1个事件 向下:每滚动1个事件 解决方案2 向上:不工作 向下:不工作 解决方案3 向上:每次滚动1个事件 向下:每滚动1个事件

Firefox 37 (win7)

解决方案1 向上:每次滚动20个事件 向下:每次滚动20个事件 解决方案2 向上:不工作 向下:每滚动1个事件 解决方案3 向上:不工作 向下:不工作

IE 11 (win8)

解决方案1 向上:每一次滚动10个事件(副作用:最后出现向下滚动) 向下:每次滚动10个事件 解决方案2 向上:不工作 向下:不工作 解决方案3 向上:不工作 向下:每滚动1个事件

IE 10 (win7)

解决方案1 向上:每次滚动1个事件 向下:每滚动1个事件 解决方案2 向上:不工作 向下:不工作 解决方案3 向上:每次滚动1个事件 向下:每滚动1个事件

IE 9 (win7)

解决方案1 向上:每次滚动1个事件 向下:每滚动1个事件 解决方案2 向上:不工作 向下:不工作 解决方案3 向上:每次滚动1个事件 向下:每滚动1个事件

IE 8 (win7)

解决方案1 向上:每一次滚动2个事件(副作用:最后出现向下滚动) 向下:每一次滚动2~4个事件 解决方案2 向上:不工作 向下:不工作 解决方案3 向上:每次滚动1个事件 向下:每滚动1个事件

---

联合解决方案

我检查了ie11和ie8的副作用是来自if else语句。因此，我用if else if语句替换它，如下所示。

从多浏览器测试中，我决定对普通浏览器使用解决方案3，对firefox和IE 11使用解决方案1。

我参考这个答案来检测IE 11。

    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.$1);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== 'undefined' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on('scroll', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log('Up');
            }
            else if(st > lastScrollTop) {
                console.log('Down');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $('body').on('mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log('Up');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log('Down');
            }
        });
    }

如果你只是想知道你是使用指针设备(鼠标或跟踪板)向上滚动还是向下滚动，你可以使用wheel事件的delay属性。

$('.container').on('wheel', function(event) { if (event.originalEvent.deltaY > 0) { $('.result').append('Scrolled down!<br>'); } else { $('.result').append('Scrolled up!<br>'); } }); .container { height: 200px; width: 400px; margin: 20px; border: 1px solid black; overflow-y: auto; } .content { height: 300px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="content"> Scroll me! </div> </div> <div class="result"> <p>Action:</p> </div>