有没有办法区分滚动事件是由浏览器还是用户引起的？特别是使用“后退”按钮时，浏览器可能会跳转到上次滚动位置。如果我绑定了滚动事件，如何判断滚动是由用户还是浏览器引起的？
$(document).scroll( function(){
//who did this?!
});
我看到有三种情况会导致浏览器滚动。
element.scrollTo(x,y)。userScroll为false；使用鼠标/键盘滚动-userScroll变为true；单击链接跳转到页面底部-userScroll变为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>
注意事项：
event.keyCodes 可能因操作系统而异，因此你可能需要相应地进行更改。希望这有所帮助！
event.thrower属性？！）。 - mrtsherman与其试图捕捉所有用户事件，更容易的方法是做相反的事情，只处理程序事件并忽略那些用户事件。
例如，以下代码可以工作：
// Element that needs to be scrolled
var myElement = document.getElementById('my-container');
// Flag to tell if the change was programmatic or by the user
var ignoreNextScrollEvent = false;
function setScrollTop(scrollTop) {
ignoreNextScrollEvent = true;
myElement.scrollTop = scrollTop
}
myElement.addEventListener('scroll', function() {
if (ignoreNextScrollEvent) {
// Ignore this event because it was done programmatically
ignoreNextScrollEvent = false;
return;
}
// Process user-initiated event here
});
当您调用setScrollTop()时，滚动事件将被忽略，而如果用户使用鼠标、键盘或其他任何方式滚动，则将处理该事件。
是的，这完全可以。我目前在一个不需要IE的应用程序中使用它——仅面向客户端。当我的Backbone应用程序启动滚动更改动画时，滚动发生但不会触发这些事件捕获。这在最新的Firefox、Safari和Chrome中进行了测试。
$('html, body').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(evt) {
// detect only user initiated, not by an .animate though
if (evt.type === 'DOMMouseScroll' || evt.type === 'keyup' || evt.type === 'mousewheel') {
// up
if (evt.originalEvent.detail < 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta > 0)) {
// down.
} else if (evt.originalEvent.detail > 0 || (evt.originalEvent.wheelDelta && evt.originalEvent.wheelDelta < 0)) {
}
}
});
当页面加载完成时，您可以检查滚动位置。在触发on scroll事件时，请检查滚动位置是否与页面加载时不同。最后，确保一旦页面被滚动，清除存储的值。
$(function () {
var loadScrollTop = ($(document).scrollTop() > 0 ? $(document).scrollTop() : null);
$(document).scroll(function (e) {
if ( $(document).scrollTop() !== loadScrollTop) {
// scroll code here!
}
loadScrollTop = null;
});
});
还有一种分离用户创建的滚动条的方法：您可以使用替代事件处理程序，例如'mousewheel'、'touchmove'、'keydown'和代码38和40进行箭头滚动，对于使用滚动条滚动-如果'scroll'事件与'mousedown'同时触发直到'mouseup'事件。
关于：
具体来说，当使用浏览器的后退按钮时，浏览器可能会跳转到上次已知的滚动位置。
这个事件在页面渲染后很快就会触发。您可以将监听滚动事件的延迟设置为1秒左右。
发现这非常有用。以下是适用于CoffeeScript的版本，供有兴趣的人参考。
$ ->
S.userScroll = false
# reset flag on back/forward
if $.history?
$.history.init (hash) ->
S.userScroll = false
mouseEvent = (e)->
S.userScroll = true
$(document).keydown (e) ->
importantKey = (e.which == 33 or # page up
e.which == 34 or # page dn
e.which == 32 or # spacebar
e.which == 38 or # up
e.which == 40 or # down
(e.ctrlKey and e.which == 36) or # ctrl + home
(e.ctrlKey and e.which == 35) # ctrl + end
)
if importantKey
S.userScroll = true;
# Detect user scroll through mouse
# Mozilla/Webkit
if window.addEventListener
document.addEventListener('DOMMouseScroll', mouseEvent, false);
# for IE/OPERA etc
document.onmousewheel = mouseEvent;