隐藏HTML标记上的溢出使浏览器跳转到页面顶部

Question

当我在html标签上设置样式时，就像在AngularJS中一样：

angular.element($document[0].documentElement).css('overflow', 'hidden');

页面跳转到页面顶部。我该如何防止这种情况？

我正在尝试显示整页覆盖图，当我尝试滚动时，背景滚动。当我在html标签上设置overflow：css样式时，它不会滚动。这导致我遇到这个问题。

Answer 1

当您隐藏文档时，您实际上是在告诉浏览器不要滚动。这就是为什么你被引导到页面顶部的原因，因为页面本质上不再超出视口。

虽然不是每个浏览器都会将您发送到页面顶部（此处的预期行为是将用户锁定到他们所在的页面），例如主动跟踪hash < em>（例如mypage.com/#ShowLogin /）就像Angular经常用于路由一样，很容易导致页面跳转到屏幕顶部。

---

编辑：

如果您想保留背景以使其不滚动页面，请使用属性background-attachment：

html, body {
  ... /* Other code here */
  background-attachment: fixed;
}