標題重寫為：如何實現底部貼上功能的滾動效果？

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解決方案？