你能在用户每次使用 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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 01:13:12  来源:igfitidea点击:

Can you get the user’s scroll position every time they scroll with JavaScript/jQuery?

javascriptjquery

提问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>

http://jsfiddle.net/pFaTF/

http://jsfiddle.net/pFaTF/

回答by Paul D. Waite

There are properties on the windowobject for this: window.scrollXand 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:

下面是一个例子:

http://jsfiddle.net/LZM7H/

http://jsfiddle.net/LZM7H/



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:

这是一个活生生的例子:

http://jsfiddle.net/LZM7H/2/

http://jsfiddle.net/LZM7H/2/

回答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-viewporthieghtwhen 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 位置。