logo标签列表

为什么使用overflow: hidden会将<body>移到页面顶部？

htmlcssoverflow
10
我创建了一个滚动的模态窗口，当模态窗口打开时需要对应用overflow: hidden来防止页面滚动。然而，overflow: hidden会导致我的跳到页面顶部。为什么会这样，我该如何避免这种情况发生？ 编辑： 这是我的的CSS：
body {
  margin: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: subpixel-antialiased;
  font-smooth: always;
  text-rendering: optimizeLegibility;
  text-shadow: 0 0 0 transparent;
  color: white;
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-size: 1em;
  line-height: 1.5;
}

这里是我的模态窗口的 CSS：

.menu {
  opacity: 0;
  display: none;
  color: white;
  overflow: hidden;
  position: absolute;
  z-index: 10;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.menu .options {
  overflow-y: scroll;
  height: 100%;
  width: 100%;
  text-align: center;
  top: 0;
  padding: 120px 0;
  position: fixed;
  z-index: 2;
}

.menu .menu_bg {
  background-color: #b4f0b4;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
}

这里是我的模态窗口的HTML代码：

<div class="menu">
    <div class="options"></div>
    <div class="menu_bg"></div>
</div>
可能是阻塞的边距折叠。您在body中是否有带有margin的顶级元素？ - BoltClock
@BoltClock，我不明白你所说的“顶级元素”是什么意思。你是指<body>的直接子元素吗？ - Wilhelm
是的，我是。对于造成的困惑感到抱歉。 - BoltClock
@BoltClock 有两个带有边距的元素。我将边距改为填充，但问题仍然存在。 - Wilhelm
2个回答
4

你的内容可能使用了height: 100%, 在同时添加overflow: hidden时，只需添加height: auto, 就能达到预期效果。

-1

这是因为 <body> 默认带有8像素的外边距，所以当你隐藏 <body> 时，外边距也会被隐藏。

设置你的 body 标签为 body{margin: 0px}，就不会再发生跳动了。

参考示例: 鼠标悬停在 body 上会出现跳动效果

http://jsfiddle.net/DIRTY_SMITH/Lmh3nt6p/

2
添加了 margin: 0 !important;，但问题仍然存在。问题在于，如果我滚动到页面底部，然后通过jquery将<body>的overflow: hidden添加上去，它会跳回页面顶部。 - Wilhelm
最好现在把你的代码发布出来，否则这将继续成为一个猜谜游戏。 - Adam Buchanan Smith
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接