Javascript $(document).scrollTop() 总是返回 0
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12788487/
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
$(document).scrollTop() always returns 0
提问by jetlej
I'm simply trying to do something once the scroll position of the page reaches a certain height. However scrollTop()
is returning 0 or null
no matter how far down I scroll. This is the help function I'm using to check the scrollTop()
value:
一旦页面的滚动位置达到一定高度,我只是想尝试做一些事情。但是scrollTop()
返回 0 或null
无论我向下滚动多远。这是我用来检查scrollTop()
值的帮助功能:
$('body').click(function(){
var scrollPost = $(document).scrollTop();
alert(scrollPost);
});
I've tried attaching scrollTop()
to $('body')
, $('html')
and of course $(window)
, but nothing changes.
我试过附加scrollTop()
到$('body')
,$('html')
当然$(window)
,但没有任何变化。
Any ideas?
有任何想法吗?
回答by jetlej
For some reason, removing 'height: 100%' from my html and body tags fixed this issue.
出于某种原因,从我的 html 和 body 标签中删除 'height: 100%' 解决了这个问题。
I hope this helps someone else!
我希望这对其他人有帮助!
回答by Verri
I had same problem with scroll = 0 in:
我在滚动 = 0 时遇到了同样的问题:
document.body.scrollTop
Next time use
下次使用
document.scrollingElement.scrollTop
Edit 01.06.2018
编辑 01.06.2018
If you using event
then you got object which has document
element in target
or srcElement
. Here is a table showing scroll operation on different browsers.
如果您使用,event
那么您将获得document
在target
or中包含元素的对象srcElement
。这是一个表格,显示了不同浏览器上的滚动操作。
As you can see Firefox and IE doesn't have srcElement
and IE 11 doesn't support scrollingElement
.
如您所见,Firefox 和 IE 没有srcElement
,IE 11 也不支持scrollingElement
.
回答by Steve Lockwood
My solution, after trying some of the above and which doesn't involve changing any CSS:
我的解决方案,在尝试了上面的一些并且不涉及更改任何 CSS 之后:
var scroll_top = Math.max( $("html").scrollTop(), $("body").scrollTop() )
This works in up-to-date versions of Chrome, Firefox, IE and Edge.
这适用于最新版本的 Chrome、Firefox、IE 和 Edge。
回答by Kamba-Bilola Ted
I just have an add-on for those who might make the same mistake as I did. My code was as followed:
我只是为那些可能和我犯同样错误的人提供了一个附加组件。我的代码如下:
var p = $('html,body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );
This code will work on all browser except for webkits browser such as chrome and safari because the <html>
tag always has a scrollTop value of zero or null.
此代码适用于除 webkit 浏览器(例如 chrome 和 safari)之外的所有浏览器,因为该<html>
标签的 scrollTop 值始终为零或 null。
The other browsers ignore it while webkit's browsers don't.
其他浏览器会忽略它,而 webkit 的浏览器不会。
The simplest solutution is just to remove the html tag from your code et Voila:
最简单的解决方案就是从你的代码中删除 html 标签,瞧:
var p = $('body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );
回答by Dawood Najam
Removing height: 100%;
from html and body tags can resolve the issue.
height: 100%;
从 html 和 body 标签中删除可以解决这个问题。
The reason is that you might have set 100% as value of height property of html and body elements. If you set the height property of html and body elements to 100%, they get height equal to document's height.
原因是您可能已将 100% 设置为 html 和 body 元素的 height 属性值。如果将 html 和 body 元素的 height 属性设置为 100%,则它们的高度等于文档的高度。
回答by Hiral Patel
Scroll Top was always returning 0 for me as well. I was using it for bringing focus to the specific element on a page. I used another approach to do so.
Scroll Top 也总是为我返回 0。我用它来将焦点放在页面上的特定元素上。我使用了另一种方法来做到这一点。
document.getElementById("elementID").scrollIntoView();
document.getElementById("elementID").scrollIntoView();
Working well for me on mobile, tablet, and desktop.
在手机、平板电脑和台式机上对我来说效果很好。
回答by Vasyl Gutnyk
had the same problem. scrollTop() works with some block not document or body. To make this method work u should add height and overflow style for your block:
有同样的问题。scrollTop() 适用于某些块而不是文档或正文。要使此方法起作用,您应该为块添加高度和溢出样式:
#scrollParag {
height: 500px;
overflow-y: auto;
}
And then:
进而:
var scrolParag = document.getElementById('scrollParag');
alert(scrolParag.scrollTop); // works!
回答by ch271828n
By the way, it seems that you should use
顺便说一句,似乎你应该使用
$("body").scrollTop()
instead of
代替
$(".some-class").scrollTop
This is why I am stuck.
这就是为什么我被卡住了。
回答by chaosifier
var bodyScrollTop = Math.max(document.scrollingElement.scrollTop, document.documentElement.scrollTop)
should work on modern browsers.
应该适用于现代浏览器。