jQuery滚动事件：如何确定以像素为单位滚动的数量（滚动增量）？ [英] jQuery scroll event: how to determine amount scrolled (scroll delta) in pixels?
问题描述
我有这个事件：
$(window).scroll(function(e){
console.log(e);
})
我想知道，我有多少卷轴以像素为单位的值，因为我认为，滚动值取决于窗口大小和屏幕分辨率。
I want to know, how much I have scroll value in pixels, because I think, scroll value depends from window size and screen resolution.
函数参数 e 不包含这些信息。
我可以在每次滚动后存储 $（窗口）.scrollTop（）并计算差异，但我可以采用不同的方式吗？
Function parameter e does not contains this information.
I can store $(window).scrollTop() after every scroll and calculate difference, but can I do it differently?
推荐答案
滚动值不依赖于窗口大小或屏幕分辨率。 滚动值只是滚动的像素数。
The "scroll value" does not depend on the window size or screen resolution. The "scroll value" is simply the number of pixels scrolled.
但是，您是否能够滚动，以及您的金额</ em > scroll基于容器的可用空间和容器内容的大小（在这种情况下容器是 document.documentElement ，或 document.body 适用于较旧的浏览器。）
However, whether you are able to scroll at all, and the amount you can scroll is based on available real estate for the container and the dimensions of the content within the container (in this case the container is document.documentElement, or document.body for older browsers).
你是正确的滚动事件不包含此信息。它不提供 delta 属性来指示滚动的像素数。对于本机滚动事件和jQuery 滚动事件，情况也是如此。这似乎是一个有用的功能，类似于 mousewheel 事件提供X和Y delta的属性。
You are correct that the scroll event does not contain this information. It does not provide a delta property to indicate the number of pixels scrolled. This is true for the native scroll event and the jQuery scroll event. This seems like it would be a useful feature to have, similar to how mousewheel events provide properties for X and Y delta.
我不知道，也不会推测，为什么权力没有为滚动提供，但这超出了这个问题的范围（随意发布一个单独的问题）。 delta 属性
I do not know, and will not speculate upon, why the powers-that-be did not provide a delta property for scroll, but that is out of scope for this question (feel free to post a separate question about this).
您使用的存储方法 scrollTop 在变量中并将其与当前 scrollTop 进行比较是我找到的最好（也是唯一）方法。但是，根据本文，您可以通过扩展jQuery来提供新的自定义事件来简化此操作： http：// learn .jquery.com / events / event-extensions /
The method you are using of storing scrollTop in a variable and comparing it to the current scrollTop is the best (and only) method I have found. However, you can simplify this a bit by extending jQuery to provide a new custom event, per this article: http://learn.jquery.com/events/event-extensions/
这是我创建的一个示例扩展，用于窗口/文档滚动。这是一个名为 scrolldelta 的自定义事件，它自动跟踪X和Y delta（如 scrollLeftDelta 和 scrollTopDelta ，分别）。我没有尝试过其他元素;将此作为练习给读者。这适用于Chrome和Firefox的当前版本。它使用技巧获取 document.documentElement.scrollTop 和 document.body.scrollTop 的总和来处理bug Chrome更新 body.scrollTop 而不是 documentElement.scrollTop （IE和FF更新 documentElement。 scrollTop ;请参阅 https://code.google.com/p/铬/问题/详细信息？id = 2891 ）。
Here is an example extension I created that works with window / document scrolling. It is a custom event called scrolldelta that automatically tracks the X and Y delta (as scrollLeftDelta and scrollTopDelta, respectively). I have not tried it with other elements; leaving this as exercise for the reader. This works in currrent versions of Chrome and Firefox. It uses the trick for getting the sum of document.documentElement.scrollTop and document.body.scrollTop to handle the bug where Chrome updates body.scrollTop instead of documentElement.scrollTop (IE and FF update documentElement.scrollTop; see https://code.google.com/p/chromium/issues/detail?id=2891).
JSFiddle演示： http://jsfiddle.net/tew9zxc1/
JSFiddle demo: http://jsfiddle.net/tew9zxc1/
Runnable Snippet（向下滚动并点击运行代码段）：
Runnable Snippet (scroll down and click Run code snippet):
// custom 'scrolldelta' event extends 'scroll' event
jQuery.event.special.scrolldelta = {
delegateType: "scroll",
bindType: "scroll",
handle: function (event) {
var handleObj = event.handleObj;
var targetData = jQuery.data(event.target);
var ret = null;
var elem = event.target;
var isDoc = elem === document;
var oldTop = targetData.top || 0;
var oldLeft = targetData.left || 0;
targetData.top = isDoc ? elem.documentElement.scrollTop + elem.body.scrollTop : elem.scrollTop;
targetData.left = isDoc ? elem.documentElement.scrollLeft + elem.body.scrollLeft : elem.scrollLeft;
event.scrollTopDelta = targetData.top - oldTop;
event.scrollTop = targetData.top;
event.scrollLeftDelta = targetData.left - oldLeft;
event.scrollLeft = targetData.left;
event.type = handleObj.origType;
ret = handleObj.handler.apply(this, arguments);
event.type = handleObj.type;
return ret;
}
};
// bind to custom 'scrolldelta' event
$(window).on('scrolldelta', function (e) {
var top = e.scrollTop;
var topDelta = e.scrollTopDelta;
var left = e.scrollLeft;
var leftDelta = e.scrollLeftDelta;
// do stuff with the above info; for now just display it to user
var feedbackText = 'scrollTop: ' + top.toString() + 'px (' + (topDelta >= 0 ? '+' : '') + topDelta.toString() + 'px), scrollLeft: ' + left.toString() + 'px (' + (leftDelta >= 0 ? '+' : '') + leftDelta.toString() + 'px)';
document.getElementById('feedback').innerHTML = feedbackText;
});
#content {
/* make window tall enough for vertical scroll */
height: 2000px;
/* make window wide enough for horizontal scroll */
width: 2000px;
/* visualization of scrollable content */
background-color: blue;
}
#feedback {
border:2px solid red;
padding: 4px;
color: black;
position: fixed;
top: 0;
height: 20px;
background-color: #fff;
font-family:'Segoe UI', 'Arial';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='feedback'>scrollTop: 0px, scrollLeft: 0px</div>
<div id='content'></div>
请注意，您可能需要根据您的操作去除事件。你没有在你的问题中提供太多的上下文，但如果你给出一个更好的例子来说明你实际使用这些信息，我们可以提供更好的答案。 （请显示更多代码，以及如何使用滚动值）。
Note that you may want debounce the event depending on what you are doing. You didn't provide very much context in your question, but if you give a better example of what you are actually using this info for we can provide a better answer. (Please show more of your code, and how you are using the "scroll value").
这篇关于jQuery滚动事件：如何确定以像素为单位滚动的数量（滚动增量）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
