Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mencapai Tatal Terpilih dalam Reka Letak Web Menggunakan Bar Tatal Penyemak Imbas?
Menggunakan Bar Skrol Penyemak Imbas untuk Tatal Terpilih dalam Reka Letak Web
Siasatan anda bertujuan untuk meniru gelagat tatal unik yang diperhatikan pada tapak web Gizmodo. Iaitu, anda berhasrat untuk mendayakan penatalan elemen div tertentu menggunakan bar skrol utama penyemak imbas sambil memastikan div lain tidak bergerak.
Halaman ujian yang anda sediakan menunjukkan pemahaman anda tentang memusatkan reka letak dan membolehkan penatalan menegak. Walau bagaimanapun, menggabungkan aspek-aspek ini telah terbukti mencabar. Mari kita sediakan penyelesaian komprehensif yang menangani kedua-dua keperluan:
Penyelesaian CSS Tulen:
Walaupun penggunaan skrip tambahan oleh Gizmodo, mencapai kesan ini menggunakan CSS tulen adalah boleh dilaksanakan. Penyelesaian kami bertujuan untuk:
Demonstrasi Kod :
Rujuk biola demonstrasi berikut:
<pre class="brush:php;toolbar:false">html, body, * { padding: 0; margin: 0; } .wrapper { min-width: 500px; max-width: 700px; margin: 0 auto; } #content { margin-right: 260px; /* = sidebar width + some white space */ } #overlay { position: fixed; top: 0; width: 100%; height: 100%; } #overlay .wrapper { height: 100%; } #sidebar { width: 250px; float: right; max-height: 100%; } #sidebar:hover { overflow-y: auto; } #sidebar>* { max-width: 225px; /* leave some space for vertical scrollbar */ }
<pre class="brush:php;toolbar:false"><div>
Memahami Penyelesaian:
Pertimbangan Tambahan:
Dengan melaksanakan penyelesaian ini, anda boleh mencipta reka letak web yang elegan yang menawarkan pengalaman menatal yang dipertingkatkan untuk pengguna.
Atas ialah kandungan terperinci Bagaimana untuk Mencapai Tatal Terpilih dalam Reka Letak Web Menggunakan Bar Tatal Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!