Tajuk ditulis semula sebagai: Bagaimana untuk mencapai kesan tatal fungsi tampal bawah?

Question

Saya cuba mencapai kesan yang serupa dengan apa yang saya lihat di sini

Tetapi kandungan setiap bahagian juga harus boleh ditatal iaitu ia hanya akan diperbaiki apabila ia sampai ke bahagian bawah bahagian.

Sebagai contoh, apabila kandungannya 200vh, seperti ini:

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>

Seperti yang anda lihat, bahagian 1 dan 2 disematkan di bahagian atas dan kami tidak boleh menatal untuk melihat foto mereka.

Tetapi bahagian terakhir berfungsi dengan sempurna.

Jadi bagaimana saya boleh mencapai kesan ini? Sebaik-baiknya gunakan CSS tulen, tetapi saya juga terbuka kepada penyelesaian JavaScript.

Answer 1

Saya jumpa penyelesaian! Sediakannya dengan satu baris kod dalam 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>

Walaupun saya tidak pasti sama ada ia akan berfungsi jika tetingkap diubah saiznya
Tetapi anda sentiasa boleh menggunakan onresize untuk mengendalikan situasi ini

Adakah saya masih terbuka kepada penyelesaian CSS tulen, jika ada?