javascript - 让父级滚动到某个点，然后子级在父级内部滚动

Question

编辑:

这是一个新的 fiddle ，可以更好地说明我要做什么:https://jsfiddle.net/gta4eo3L/3/ .

请注意，为了查看您需要滚动两次的所有子内容。一次让 parent 进入全视野；然后再次滚动父级中的内容。我的问题是如何以无缝的方式实现这一点？换句话说，如何使第一个卷轴的卷轴“势头”延续到第二个卷轴。

原文:

我怎样才能无缝地实现这种行为？父级高度是固定的，我可以使用 position:sticky 来固定它；但结合 overflow:scroll 属性，子级将在父级到达停止点之前在父级内部滚动。

在这里查看我的 fiddle :https://jsfiddle.net/xzo1teaw/11/

它有点工作，但在父滚动和父滚动之间的子滚动之间不能平滑过渡。

Answer 1

一旦你理解了一件重要的事情，这就相对容易实现了
child 不必是 parent 的 child
+ 事实上，您可以使用 CSS Grid 将多个元素放在一个地方
+ z-index 将元素置于粘性之上

body {
/*  some space to scroll  */
  height: 500vh;
/*  some space to scroll  */
  padding-top: 50vh;
}

.container {
  display: grid;
  grid-template-areas: "only";
  justify-items: center;
}

.parent {
  grid-area: only;
  background: grey;
  position: sticky;
  top: 10vh;
  width: 90%;
/*  one screen height  */
  height: 90vh;
}

.child {
/*  offset for parent  */
  margin-top: 200px;
  height: 200vh;
  grid-area: only;
  background: linear-gradient(
    0deg,
    rgba(131, 58, 180, 1) 0%,
    rgba(253, 29, 29, 1) 50%,
    rgba(252, 176, 69, 1) 100%
  );
  z-index: 2;
  width: 80%;
}

body * {
  display: inline-block;
  border: 1px solid black;
}

 <div class="container">
   Container
   <div class="parent">Parent</div>
   <div class="child">Child</div>
</div>