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

Question

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

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

页面跳转到页面顶部。我怎样才能避免这种情况？

我正在尝试显示整页叠加层，当我尝试滚动时，背景会滚动。当我在 html 标签上设置 overflow: css 样式时，它不会滚动。这让我遇到了这个问题。

Answer 1

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

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

---

编辑:

如果你想保留背景使其不随页面滚动，请使用属性background-attachment:

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