Question

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

编辑：以下是我的<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;
}

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

Answer 1

您的正文可能在height: 100%中，只需在添加height: auto的同时添加overflow: hidden，就可以了。

Answer 2

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

将您的身体设置为body{margin: 0px}，它将不再跳跃。

参见示例：悬停正文以查看跳转

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

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

2 个答案: