cari

Rumah  >  Soal Jawab  >  teks badan

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

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.

P粉587780103P粉587780103447 hari yang lalu569

membalas semua(1)saya akan balas

  • P粉141925181

    P粉1419251812023-09-10 18:28:14

    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?

    balas
    0
  • Batalbalas