Question

我有一个简单的HTML文档，其中height为100vh。元素包含标题。现在，当我滚动时，什么也没有发生。我需要的是页面保持不变并且标题向上滚动并移出视口的效果。我该如何实现？

我的代码简化了：

html,
body {
  margin: 0;
  padding: 0;
}

#wrapper {
  background-color: red;
  height: 100vh;
  width: 100%;
}

h1 {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="wrapper">
  <h1>Title</h1>
</div>

Answer 1

您可以以相反的方式进行操作-不是固定待滚动元素，而是使用负Z索引将内容元素放入背景：

将position:fixed应用于包装器，并使用z-index: -1将其移至后台。从position: absolute删除h1，将其位置重置为static，以使其滚动。

要使滚动可能，您要么需要足够的高度来放置title元素（至少150％或更多），要么需要随后的另一个（可能不可见）元素，如下面的示例所示。

h1内的文本居中可以通过flex完成（见下文）。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#wrapper {
  position: fixed;
  z-index: -1;
  background-color: red;
  height: 100vh;
  width: 100%;
}

h1 {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
}

.something_else {
  height: 100%;
}

<div id="wrapper"> wrapper contents here... </div>
<h1>Title</h1>
<div class="something_else"></div>

向上滚动100vh高度页面中的元素并使其不可见

1 个答案: