javascript jQuery scrollTop() 为所有元素返回 0
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22173454/
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
jQuery scrollTop() returns 0 for all elements
提问by jonny bordo
At my job we have a one page site I created with AngularJS.
We're using the ui-router plugin (version 0.2.0).
Recently I've noticed that when moving from one state to another, the window isn't scrolled to the top.
I even tried to scroll it to the top manually using jQuery's scrollTop()function on every state change (using the $stateChangeSuccessevent). But it didn't work.
在我的工作中，我们有一个用 AngularJS 创建的单页站点。
我们正在使用 ui-router 插件（版本 0.2.0）。
最近我注意到当从一种状态移动到另一种状态时，窗口不会滚动到顶部。
我什至尝试scrollTop()在每次状态更改（使用$stateChangeSuccess事件）时使用 jQuery 的函数手动将其滚动到顶部。但它没有用。
So I started investigating, and I've noticed that scrollTop()is returning 0 for every element on the page.
Not only that, but when I print the window.scrollYto the console I get 0 (no matter where I'm at on the page). Not only in my code, but even if I just write it in the chrome dev tools console.
所以我开始调查，我注意到scrollTop()页面上的每个元素都返回 0。
不仅如此，当我打印window.scrollY到控制台时，我得到 0（无论我在页面上的哪个位置）。不仅在我的代码中，而且即使我只是在 chrome 开发工具控制台中编写它。
I've written several apps with AngularJS and ui-router, and it only happens in this particular one.
我已经用 AngularJS 和 ui-router 编写了几个应用程序，它只发生在这个特定的应用程序中。
I've checked to see if I have overwritten the scrollTop()function or even the window.scrollYfield, but haven't found anything.
我已经检查过是否覆盖了scrollTop()函数甚至window.scrollY字段，但没有找到任何东西。
I've tried using the ui-viewwith autoscroll="true"and autoscroll="false", but it didn't make a difference.
我试过使用ui-viewwithautoscroll="true"和autoscroll="false"，但没有什么区别。
I also tried giving the htmland the bodyelements height:100%, and I also tried it without. But nothing.
我也试过给html和body元素height:100%，我也试过没有。但没什么。
I really don't know what to do next.
我真的不知道接下来该怎么办。
I wasn't able to reproduce the problem, but if you think there is any code I should post here that could be of any help, I'll be glad to do that.
我无法重现该问题，但是如果您认为我应该在此处发布任何可能有帮助的代码，我会很乐意这样做。
Thanks!
谢谢！
EDIT:
编辑：
I've run this function on the console:
我在控制台上运行了这个函数：
var l = $('*').length;
for(var i = 0; i < l; i++) {
var elem = $('*:eq(' + i + ')');
if(elem.scrollTop() > 0) {
console.log(elem, elem.scrollTop());
}
}
The function printed out only one element with it's top scroll.
The element is a wrapping div that holds the whole content and the main view (I have nested views in my app).
If I use scrollTop(0)on this element I get what I wanted, but it only deals with the symptom, and not the real problem.
该函数仅打印出一个带有顶部滚动条的元素。
该元素是一个包含整个内容和主视图的包装 div（我的应用程序中有嵌套的视图）。
如果我scrollTop(0)在这个元素上使用，我会得到我想要的，但它只处理症状，而不是真正的问题。
采纳答案by jonny bordo
As @Hans commented, there wasn't actually a problem.
I had a wrapping element, that was positioned absolutewith:
正如@Hans 评论的那样，实际上没有问题。我有一个包装元素，它被定位absolute为：
top:0;
bottom:0;
left:0;
right:0;
overflow:auto
So The window's scrollTopwas always 0, and the scrollbar actually belonged to the wrapping element.
所以窗口的scrollTop总是0，滚动条实际上属于包装元素。
Since I could't get rid of the wrapping element's positioning, I used ui-router's $stateChangeSuccessevent, and manually scrolled the wrapping element to the top.
由于我无法摆脱包装元素的定位，所以我使用了ui-router的$stateChangeSuccess事件，并手动将包装元素滚动到顶部。
回答by Chi Row
From the console, try
从控制台，尝试
console.log(frames)
console.log(frames.top.scrollY)
If window.scrollY is showing 0, then the reference frame must not be the window. Do you have any iframes on the page? console.log of frames will show the list of frames on the page.
Hope that helps.
如果 window.scrollY 显示为 0，则参考系不能是窗口。页面上有 iframe 吗？console.log of frames 将显示页面上的框架列表。
希望有帮助。
回答by uames
My code is happend this problem too, and I found a body{overflow: hidden;} is the reason, I remove "overflow: hidden;" and all is well.
我的代码也发生了这个问题，我发现一个 body{overflow: hidden;} 是原因，我删除了“overflow: hidden;” 一切都很好。
