是否可以判断滚动事件是由浏览器还是由用户完成？具体来说，当使用后退按钮时，浏览器可能会跳转到最后一个已知的滚动位置。如果我绑定到滚动事件，我怎么知道这是由用户还是浏览器引起的？
$(document).scroll( function(){
//who did this?!
});
我看到了三种导致浏览器滚动的情况。
element.scrollTo(x,y)。不幸的是，没有直接的方法可以说明这一点。
我会说，如果您可以重新设计您的应用程序，使其不依赖于这种类型的流程，那就去做吧。
如果没有，我能想到的解决方法是跟踪用户启动的滚动并检查滚动是由浏览器还是由用户触发。
这是我放在一起的一个例子，它做得很好（除了 jQuery 历史有问题的浏览器）。
您需要在本地运行它才能对其进行全面测试（jsFiddle/jsbin 不适合，因为它们 iFrame 内容）。
这是我验证的测试用例：
userScroll是falseuserScroll变为trueuserScroll变成falseuserScroll变成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 可能因操作系统而异，因此您可能需要适当地更改它。希望这可以帮助！
与其试图捕获所有用户事件，不如反其道而行之，只处理程序化事件——并忽略它们。
例如，这种代码可以工作：
// 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()，滚动事件将被忽略，而如果用户使用鼠标、键盘或任何其他方式滚动，则将处理该事件。
据我所知，不可能（没有任何工作）告诉“用户”或其他方式何时发出滚动事件。
您可以尝试（正如其他人提到的）捕获 mousewheel 事件，然后可能尝试在检查当前聚焦的元素时在任何可以触发滚动（箭头、空格等）的键上捕获 keydown 事件，因为例如您无法使用在输入字段中键入时使用箭头键。一般来说，这将是复杂而凌乱的脚本。
根据您正在处理的情况，我可以猜测“恢复逻辑”，而不是检测用户发出的滚动事件，只需连接到以编程方式制作的任何滚动中，并将任何不是由您的代码制作的滚动事件视为由用户制作。就像我说的，这取决于情况，以及您想要达到的目标。
是的，这是 100% 可能的。我目前在一个不需要 IE 的应用程序中使用它 - 仅面向客户端。当我的 Backbone 应用程序启动滚动更改的动画时 - 滚动发生但不会触发这些事件捕获。这是最新的 FF、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)) {
}
}
});
尝试改用 Mousewheel 和 DOMMouseScroll 事件。见http://www.quirksmode.org/dom/events/scroll.html