Jquery 检测用户是否创建了滚动事件

发布于08月27日

是否可以判断滚动事件是由浏览器还是由用户完成的？具体来说，当使用后退按钮时，浏览器可能会跳转到最后一个已知的滚动位置.如果我绑定到滚动事件，我如何判断这是由用户还是浏览器引起的？

$(document).scroll( function(){ 
    //who did this?!
});

我发现有三种情况会导致浏览器中出现滚动.

The user performs some action. For example, uses mousewheel, arrow keys, page up/down keys, home/end keys, clicks the scrollbar or drags its thumb.
The browser scrolls automatically. For example, when using the back button in your browser it will jump to the last known scroll position automatically.
Javascript scrolls. For example, element.scrollTo(x,y).

推荐答案

不幸的是，没有直接的方法来说明这一点.

我想说，如果你能让你的应用程序不依赖于这种流量，那就go 吧.

如果不是，我能想到的workaround个方法是跟踪用户启动的滚动，并判断滚动是由浏览器还是用户触发的.

这里有一个例子，我把它放在一起做得很好(除了jQuery历史有问题的浏览器).

You need to run this locally to be able to test it fully (jsFiddle/jsbin are not good fits as they iFrame the contents).

Here's the test cases that I validated:

Page loads - userScroll is false
使用鼠标/键盘滚动-userScroll变为true
Click on the link to jump to page bottom - userScroll becomes false
单击后退/前进-userScroll变为false；

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
    <script type="text/javascript" src="https://raw.github.com/tkyk/jquery-history-plugin/master/jquery.history.js"></script> 
</head> 
<body> 
    <span> hello there </span><br/> 
    <a href="#bottom"> click here to go down </a> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <a name="bottom"> just sitting </a> 
</body> 
<script type="text/javascript"> 

var userScroll = false;     

function mouseEvent(e) { 
    userScroll = true; 
} 


$(function() { 

    // reset flag on back/forward 
    $.history.init(function(hash){ 
        userScroll = false; 
    }); 

    $(document).keydown(function(e) { 
        if(e.which == 33        // page up 
           || e.which == 34     // page dn 
           || e.which == 32     // spacebar
           || e.which == 38     // up 
           || e.which == 40     // down 
           || (e.ctrlKey && e.which == 36)     // ctrl + home 
           || (e.ctrlKey && e.which == 35)     // ctrl + end 
          ) { 
            userScroll = true; 
        } 
    }); 

    // detect user scroll through mouse
    // Mozilla/Webkit 
    if(window.addEventListener) {
        document.addEventListener('DOMMouseScroll', mouseEvent, false); 
    }

    //for IE/OPERA etc 
    document.onmousewheel = mouseEvent; 


    // to reset flag when named anchors are clicked
    $('a[href*=#]').click(function() { 
        userScroll = false;
    }); 

      // detect browser/user scroll
    $(document).scroll( function(){  
        console.log('Scroll initiated by ' + (userScroll == true ? "user" : "browser"));
    });
}); 
</script> 
</html>

Notes:

This doesn't track scrolling when the user drags the scrollbar with mouse. This can be added with some more code, which I left as an exercise for you.
event.keyCodes可能会因操作系统而异，因此您可能需要对其进行适当更改.

Hope this helps!