防止浏览器视口在运行时页面高度增加时粘在底部？

Question

现代浏览器似乎有一个功能，当页面高度增加时，视口会固定在底部。实际发生的是，当初始位置位于（或非常接近）页面底部时，浏览器以与增加高度相同的速率滚动视口。这导致页面看起来好像向上而不是向下扩展。

如何使用 CSS 或 JS 为某个页面禁用此功能，以便页面始终在视觉上向下扩展？

当然，当添加元素的高度被动画扩展时也会发生这种情况。出于这个原因，如果可能的话，我想避免之后重置滚动位置以防止可见跳转。可以在下面的 gif 中观察此“功能”（似乎仅在极少数情况下发生）与视口和放置动画交互的演示。

我知道一定有办法，否则每个无限滚动的站点都会陷入无限循环。反驳：对于超过特定高度限制的容器，Chrome 似乎不会这样做。所以也许无限滚动的网站甚至不会在他们的网站中解决这个问题。

Answer 1

您的意思是当您滚动到底部并添加一段内容时，您会停留在底部吗？因为解决方案非常简单：

选项1

• 将当前滚动偏移存储到顶部（例如，您向下滚动了多少像素）
• 添加新内容
• 将顶部的滚动偏移设置为存储的值

最后两个步骤可以快速完成，用户不会注意到。

选项2

不能 100% 确定这有效，但我猜它确实有效：

• 当访问者滚动到底部时，始终将其向后滚动 3 像素。这样，它们在添加新内容时就不会位于底部，因此浏览器会保持在原来的位置。