标题重写为：如何实现底部粘贴功能的滚动效果？

Question

我正在尝试实现一个类似我在这里看到的效果

但是每个部分的内容也应该是可滚动的，即只有在达到部分底部时才会固定。

例如，当内容为200vh时，像这样：

section {
  position: sticky;
  top: 0;
  height: 200vh;
}

section img{
  width:100%;
  height:100%
}


section:nth-of-type(1) {
  background: rgb(225, 204, 200);
}

section:nth-of-type(2) {
  background: rgb(240, 216, 163);
}

section:nth-of-type(3) {
  background: rgb(192, 211, 217);
}

<section>
    <img src="https://picsum.photos/id/128/800/300" alt="">
</section>

<section>
    <img src="https://picsum.photos/id/48/800/300"alt="">
</section>

<section>
    <img src="https://picsum.photos/id/42/800/300" alt="">
</section>

正如你所看到的，第1和第2部分固定在顶部，我们无法滚动查看它们的照片。

但是最后一部分完美地工作。

那么我该如何实现这个效果？理想情况下使用纯CSS，但我也接受JavaScript解决方案。

Answer 1

我找到了一个解决方案！使用JavaScript中的一行代码来设置top

document.querySelectorAll(".item").forEach((el)=>{ el.style.top=(document.documentElement.clientHeight - el.offsetHeight)+"px" });

section{
  position:sticky;
  width:100%;
  height:200vh;
}

img{
  object-fit:cover;
  height:100%;
  width:100%;
}

<section class="item">
 <img src="https://picsum.photos/id/128/800">
</section>

<section class="item">
  <img src="https://picsum.photos/id/48/800">
</section>

<section class="item">
  <img src="https://picsum.photos/id/42/800">
</section>

虽然我不确定如果窗口被调整大小是否会起作用
但你可以始终使用onresize来处理这种情况

如果有的话，我仍然可以接受纯CSS解决方案？