我对Angular有一个奇怪的错误。
以下是上下文:页面加载窗口中的所有内容。用户点击某些内容并加载更多内容。 ng-repeat将文档高度推到折叠下方,显示垂直滚动条,用户可以向下滚动以查看其余内容。一切正常。
如果我滚动到底部,然后刷新页面,滚动位置会跳回到页面顶部,所有内容都会重置。如果我再次单击以加载其他内容,则会显示,但滚动“已锁定”。滚动条仍然出现,但滚动滚轮是不可能的。
所有网站功能都有效,但我无法使用鼠标向下滚动(或使用箭头键)。如果我单击并向下拖动滚动条,则会修复问题并恢复滚动。
更糟糕的是,这种错误只发生在大约10%的时间。其余的时间,页面愉快滚动就好了。
我发现了一些线索:
在Angular控制器内部,我添加了以下内容:
console.log( $(window).scrollTop() );
此代码段记录页面加载之前的scrollTop值。它每次记录,甚至滚动工作正常的时间。
更令人困惑的是,在HTML本身中,我添加了以下事件监听器:
$(window).on("scroll", function(e) {
console.log("Scroll event logged. Current scroll position: ", $(window).scrollTop());
})
这会在页面加载时始终记录检测到滚动事件,并且scrollTop现在为0。
更令人困惑的是,有时候,当滚动功能正常工作并添加其他内容时,它会直接跳到底部,就像我从底部开始滚动一样。
我认为发生了什么
我认为当页面重新加载时,它会保留现在不可能的scrollTop值。由于scrollTop低于文档高度,浏览器会尝试向上滚动回零,但这种机制有缺陷且不可预测。
有没有人知道在页面加载时将滚动位置重置到页面顶部的万无一失的方法?简单地使用$(window).scrollTop(0)不起作用。我希望有人理解这个机制的较低层次(或者知道另一种方式)。
我已经尝试了许多脏黑客(比如在加载其他内容时将窗口滚动1px),似乎没有任何工作。我已经被困在这几个小时了,这让我有点疯狂。
另外,我喜欢将它放在JSFiddle中,但是由于你无法刷新JSFiddle页面而不会丢失所有代码(或者将它重置为非运行状态),它将无法工作。遗憾!