检测滚动事件是否由用户创建 [英] Detect whether scroll event was created by user
问题描述
是否可以判断滚动事件是由浏览器还是由用户完成的？具体地，当使用后退按钮时，浏览器可以跳转到最后已知的滚动位置。如果我绑定滚动事件，我如何判断这是由用户还是浏览器引起的？
Is it possible to tell whether a scroll event was done by the browser or by the user? Specifically, when using the back button a browser may jump to the last known scroll position. If I bind to scroll event how can I tell whether this was caused by user or browser?
$(document).scroll( function(){
//who did this?!
});
我看到导致浏览器滚动的三种情况。
I see three types of situations that cause scrolling in a browser.
- 用户执行某些操作。例如，使用鼠标滚轮，箭头键，向上/向下翻页键，主页/结束键。
- 浏览器自动滚动。例如，当您在浏览器中使用后退按钮时，它将自动跳转到最后一个已知的滚动位置。
- Javascript滚动。例如，
element.scrollTo（x，y）。
- The user performs some action. For example, uses mousewheel, arrow keys, page up/down keys, home/end keys.
- 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).
推荐答案
不幸的是，没有直接的说法。
Unfortunately, there is no direct way of telling that.
我想说如果你能重新设计你的应用程序，以便它不依赖于这种类型的流程，那就去做吧。
I would say if you can redesign your app so that it doesn't depend on this type of flow, go for that.
如果没有，我能想到的解决方法是跟踪用户启动的滚动并检查是否浏览器触发滚动或者由用户。
If not, a workaround I can think of is to keep track of user initiated scrolls and check that to see if the scroll was triggered by the browser or by the user.
这是我放在一起的一个例子，它做得非常好（除了jQuery历史有问题的浏览器）。
Here's an example that I put together which does this pretty well (except for browsers where jQuery history has problems with).
你需要在本地运行它才能完全测试它（jsFiddle / jsbin不适合他们iFrame的内容）。
You need to run this locally to be able to test it fully (jsFiddle/jsbin are not good fits as they iFrame the contents).
以下是我验证的测试用例：
- 页面加载 -
userScrollfalse - 使用鼠标/键盘滚动 -
userScroll变为true - 点击链接跳转到页面底部 -
userScroll变为false - 单击后退/前进 -
userScroll变为false;
- Page loads -
userScrollisfalse - Scroll using mouse/keyboard -
userScrollbecomestrue - Click on the link to jump to page bottom -
userScrollbecomesfalse - Click Back/Forward -
userScrollbecomesfalse;
<!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>
注意：
- 当用户使用鼠标拖动滚动条时，这不会跟踪滚动。这可以添加一些代码，我将这些代码作为练习添加。
-
event.keyCodes可能因操作系统而异，所以你可能需要适当改变。
- 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.keyCodesmay vary by OS, so you may have to change that appropriately.
希望这有帮助！
这篇关于检测滚动事件是否由用户创建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
