你能在用户每次使用 JavaScript/jQuery 滚动时获取用户的滚动位置吗?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7182375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you get the user’s scroll position every time they scroll with JavaScript/jQuery?
提问by Richard Hedges
Is it possible to grab the current position of the users scroll bar when they scroll?
滚动时是否可以抓取用户滚动条的当前位置?
Say, if they were scrolled to the very top it would be 0, if they scrolled down it'd change.
比如说,如果它们滚动到最顶部,它将是 0,如果它们向下滚动,它会改变。
Can I assign a variable to contain the current scroll position whenever I access it, or is there a function in JavaScript for this already?
我可以在每次访问时分配一个变量来包含当前滚动位置,或者 JavaScript 中是否已经有用于此的函数?
回答by Dunning-Kruger
From your comment, I get you are looking for a scroll event listener such as http://api.jquery.com/scroll/, and then you can use http://api.jquery.com/scrollTop/to find out the position of the scroll.
从您的评论中,我知道您正在寻找滚动事件侦听器,例如 http://api.jquery.com/scroll/,然后您可以使用http://api.jquery.com/scrollTop/找出滚动条的位置。
For example:
例如:
<script>
$(window).scroll(function () {
//You've scrolled this much:
$('p').text("You've scrolled " + $(window).scrollTop() + " pixels");
});
</script>
回答by Paul D. Waite
There are properties on the window
object for this: window.scrollX
and window.scrollY
.
window
对象上有用于 this:window.scrollX
和 的属性window.scrollY
。
See e.g. http://javascript.gakaa.com/window-scrollx-2-0-scrolly.aspx
参见例如http://javascript.gakaa.com/window-scrollx-2-0-scrolly.aspx
回答by jdavies
Try using .scrollTop()
尝试使用.scrollTop()
Here is an example:
下面是一个例子:
Edit
编辑
If you are trying to output the position of the element being scrolled as it happens then this can be achieved using the .scroll()event:
如果您尝试输出正在滚动的元素的位置,则可以使用.scroll()事件来实现:
$('#container').scroll(function(){
var position = $('#container').scrollTop();
});
Here is a live example:
这是一个活生生的例子:
回答by Paul
You can get the scrollTop property of the body element:
您可以获取 body 元素的 scrollTop 属性:
document.getElementsByTagName('body')[0].scrollTop;
This returns the number of pixels that are above the visible area.So 0 when the user hasn't scrolled, bodyheight-viewporthieght
when the scrollbar is at the bottom.
这将返回可见区域上方的像素数。因此,当用户未滚动时,bodyheight-viewporthieght
当滚动条位于底部时,为 0。
回答by toopay
as additional to Paul D Waite answer, you can told the browser to scroll the window to by using window.scroll(0,0);
, where the value is referencing to x and y position.
作为 Paul D Waite 答案的补充,您可以告诉浏览器使用 将窗口滚动到window.scroll(0,0);
,其中值引用 x 和 y 位置。