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:

• Memusatkan reka letak secara responsif.
• Tatal menegak kandungan sebelah kiri menggunakan bar skrol penyemak imbas.
• Pastikan bar sisi sebelah kanan tetap dibetulkan di bahagian atas tetingkap penyemak imbas dan perkenalkan bar skrol hanya pada tuding.
• Pindahkan penatalan ke bar skrol penyemak imbas dengan lancar apabila sampai ke hujung bar sisi.

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:

• # div pembalut berfungsi sebagai bekas induk untuk keseluruhan susun atur. Ia memastikan pemusatan mendatar.
• #content mengandungi kandungan utama dan boleh ditatal secara menegak.
• #overlay ialah bekas tetap yang membolehkan menatal keseluruhan reka letak. Ia digunakan untuk mencipta ilusi menatal kandungan di luar tetingkap penyemak imbas.
• #sidebar ialah bar sisi tetap sebelah kanan. Ia menatal secara bebas sehingga penghujungnya dicapai, pada ketika itu menatal beralih ke bar skrol penyemak imbas.

Pertimbangan Tambahan:

• Halang Penatalan Utama Kandungan pada Sidebar Hover: Cipta biola kedua yang menunjukkan cara untuk menghalang penatalan kandungan utama apabila tetikus berada di atas bar sisi.
• Lebar Fleksibel: Pertimbangkan untuk melaksanakan lebar fleksibel untuk kedua-dua kandungan utama dan bar sisi berdasarkan anda pilihan.

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!