为什么溢出：隐藏将 <body> 移动到页面顶部？

Question

为什么溢出：隐藏将 <body> 移动到页面顶部？

我创建了一个滚动模态窗口overflow: hidden，当模态打开时，它需要应用于主体，以防止主体滚动。但是，overflow: hidden导致我的身体跳到页面顶部。为什么这是我如何防止这种情况发生？

编辑：这是我的 css <body>：

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;
}

Run Code Online (Sandbox Code Playgroud)

这是我的模态窗口的 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;
}

Run Code Online (Sandbox Code Playgroud)

这是我的模态窗口的 HTML：

<div class="menu">
    <div class="options"></div>
    <div class="menu_bg"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ada*_*ith -1

这是因为<body>默认边距为 8 像素，因此当您隐藏边距时，<body>边距就会消失。

将你的身体设置为body{margin: 0px}，它就不会再跳了。

查看示例：悬停主体即可查看跳跃

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

添加了 `margin: 0!important;` 并且我仍然遇到同样的问题。问题是，如果我滚动到页面底部，然后通过 jquery 将“overflow:hidden”添加到“<body>”，它会跳回页面顶部。 (2认同)

归档时间：	10 年，2 月前
查看次数：	4314 次
最近记录：	7 年，4 月前

为什么溢出：隐藏将 &lt;body&gt; 移动到页面顶部？

为什么溢出：隐藏将 <body> 移动到页面顶部？