html - 固定位置的 child ，溢出隐藏的 parent 。只隐藏底部

Question

我想在页面上的相同位置放置一系列固定元素，并让它们的父元素滚动到 View 中时可见。

到目前为止我有这个:https://codepen.io/porgeet/pen/ywZgyq

.parent {
  position: relative;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 5em;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.one {
  background: pink;
  color: green;
}

.two {
  background: aquamarine;
  color: blue;
}

.three {
  background: pink;
  color: red;
}

.child {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

<div class="main">
  <div class="parent one">
    <div class="child">One</div>
  </div>
  <div class="parent two">
    <div class="child">Two</div>
  </div>
  <div class="parent three">
    <div class="child">Three</div>
  </div>
</div>

问题

溢出的父级似乎只影响它之后的 div，而不是之前的。

我的目标是先显示一个，然后是两个，然后是三个。

如有任何帮助，我们将不胜感激。

Answer 1

overflow:hidden 在您的情况下不会执行任何操作，因为您使元素固定¹。你面临的是绘画顺序的逻辑结果，因为你没有指定任何 z-index 所以第二个 position:relative 元素将被绘制在第一个 position:fixed 等等，这就是为什么第二个背景会隐藏第一个标题等等。

使用 position:fixed 你将无法实现这一点，因为你的代码几乎等同于下面的代码，其中父元素和子元素之间没有更多关系。

.parent,
.child{
  position: relative;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 5em;
  align-items: center;
  justify-content: center;
  text-align:center;
  overflow: hidden;
  width:100%;
}

.one {
  background: pink;
}
.one + .child {  
color: green;
}

.two {
  background: aquamarine;
}
.two + .child {
  color: blue;
 }

.three {
  background: pink;
}
.three + .child {
  color: red;
}
.child {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

<div class="parent one"></div>
<div class="child">One</div>
<div class="parent two"></div>
<div class="child">Two</div>
<div class="parent three"></div>
<div class="child">Three</div>

我认为你实现所需效果的唯一方法是考虑一些 JS。这是一个更简单的想法，您可以考虑使用 position:absolute 来使用 overflow:hidden:

window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--t', scroll+"px");
}

.parent {
  position: relative;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 5em;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.one {
  background: pink;
  color: green;
}

.two {
  background: aquamarine;
  color: blue;
}

.three {
  background: pink;
  color: red;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top:var(--t,0);
}

.two .child {
  top: calc(50% - 100vh);
}

.three .child {
  top: calc(50% - 200vh);
}

<div class="parent one">
  <div class="child">One</div>
</div>
<div class="parent two">
  <div class="child">Two</div>
</div>
<div class="parent three">
  <div class="child">Three</div>
</div>

技巧是使用窗口滚动调整边距以相同方式移动所有元素，最初我们将它们定位在屏幕中的相同位置，这就是我添加 100vh 和 的原因200vh 向上移动元素。

我们还可以调整翻译:

window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--t', scroll+"px");
}

.parent {
  position: relative;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 5em;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.one {
  background: pink;
  color: green;
}

.two {
  background: aquamarine;
  color: blue;
}

.three {
  background: pink;
  color: red;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% + var(--t,0px)));
}

.two .child {
  top: calc(50% - 100vh);
}

.three .child {
  top: calc(50% - 200vh);
}

body {
 margin:0;
}

<div class="parent one">
  <div class="child">One</div>
</div>
<div class="parent two">
  <div class="child">Two</div>
</div>
<div class="parent three">
  <div class="child">Three</div>
</div>

---

¹This property specifies whether content of a block container element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.^ref

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.^ref