一尘不染

jQuery scrollTop()为所有元素返回0

angularjs

在我的工作中,我们有一个使用AngularJS创建的一页站点。
我们正在使用ui-router插件(版本0.2.0)。
最近,我注意到从一种状态切换到另一种状态时,该窗口不会滚动到顶部。
我什至尝试scrollTop()在每次状态更改(使用$stateChangeSuccess事件)时使用jQuery的功能将其手动滚动到顶部。但这没有用。

因此,我开始进行调查,并且注意到scrollTop()页面上的每个元素都返回0。
不仅如此,当我将其打印window.scrollY到控制台时,我得到0(无论我在页面上的什么位置)。不仅在我的代码中,即使我只是在chrome
dev工具控制台中编写它。

我已经使用AngularJS和ui-router编写了多个应用程序,并且仅在此特定应用程序中发生过。

我检查了一下是否覆盖了scrollTop()函数甚至window.scrollY字段,但没有发现任何东西。

我已经尝试过使用ui-viewwith autoscroll="true"autoscroll="false",但是并没有什么不同。

我还尝试提供htmlbody元素height:100%,也尝试不使用。但是什么都没有。

我真的不知道下一步该怎么做。

我无法重现该问题,但是如果您认为有任何我应该在此处发布的代码可能会有所帮助,我会很乐意这样做。

谢谢!

编辑:

我已经在控制台上运行了此功能:

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)在这个元素上使用,我会得到想要的,但是它只处理症状,而不是真正的问题。


阅读 489

收藏
2020-07-04

共1个答案

一尘不染

正如@Hans所说,实际上没有问题。我有一个包装元素,它的位置absolute是:

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

因此,窗口的值scrollTop始终为0,而​​滚动条实际上​​属于包装元素。

由于无法摆脱包装元素的位置,因此我使用了ui-router的$stateChangeSuccess事件,并手动将包装元素滚动到顶部。

2020-07-04