Rumah > Soal Jawab > teks badan
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粉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?