jQuery scrollTop() 为所有元素返回 0 [英] jQuery scrollTop() returns 0 for all elements

问题描述

在我的工作中，我们有一个使用 AngularJS 创建的单页网站.
我们正在使用 ui-router 插件(版本 0.2.0).
最近我注意到当从一种状态移动到另一种状态时，窗口没有滚动到顶部.
我什至尝试在每次状态更改时使用 jQuery 的 scrollTop() 函数手动将其滚动到顶部(使用 $stateChangeSuccess 事件).但它没有用.

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 $stateChangeSuccess event). But it didn't work.

所以我开始调查，我注意到 scrollTop() 为页面上的每个元素返回 0.
不仅如此，当我将 window.scrollY 打印到控制台时，我得到 0(无论我在页面上的哪个位置).不仅在我的代码中，即使我只是在 chrome 开发工具控制台中编写它.

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.scrollY to 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.

我用 AngularJS 和 ui-router 编写了几个应用程序，它只发生在这个特定的应用程序中.

I've written several apps with AngularJS and ui-router, and it only happens in this particular one.

我已经检查过是否覆盖了 scrollTop() 函数甚至 window.scrollY 字段，但没有找到任何东西.

I've checked to see if I have overwritten the scrollTop() function or even the window.scrollY field, but haven't found anything.

我尝试将 ui-view 与 autoscroll="true" 和 autoscroll="false" 一起使用，但它没有没有任何影响.

I've tried using the ui-view with autoscroll="true" and autoscroll="false", but it didn't make a difference.

我也试过给 html 和 body 元素 height:100% ，我也试过没有.但没什么.

I also tried giving the html and the body elements height:100%, and I also tried it without. But nothing.

我真的不知道接下来要做什么.

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.

谢谢！

我已经在控制台上运行了这个函数:

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());
    }
}

该函数仅打印出一个带有顶部滚动条的元素.
该元素是一个包含整个内容和主视图的包装 div(我的应用程序中有嵌套视图).
如果我在这个元素上使用 scrollTop(0) 我得到了我想要的，但它只处理症状，而不是真正的问题.

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.

推荐答案

正如@Hans 评论的那样，实际上没有问题.我有一个包装元素，它被定位 absolute 与:

As @Hans commented, there wasn't actually a problem. I had a wrapping element, that was positioned absolute with:

top:0;
bottom:0;
left:0;
right:0;
overflow:auto

所以窗口的scrollTop始终为0，滚动条实际上​​属于包装元素.

So The window's scrollTop was always 0, and the scrollbar actually belonged to the wrapping element.

由于无法摆脱包裹元素的定位，我使用了ui-router的$stateChangeSuccess事件，手动将包裹元素滚动到顶部.

Since I could't get rid of the wrapping element's positioning, I used ui-router's $stateChangeSuccess event, and manually scrolled the wrapping element to the top.

这篇关于jQuery scrollTop() 为所有元素返回 0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！