Bagaimana untuk Membuat Tatal Bar Sisi Secara Bebas Menggunakan Bar Tatal Penyemak Imbas?

Cara Menatal Kandungan DIV Tertentu Menggunakan Bar Skrol Penyemak Imbas

Pengenalan

Banyak laman web, seperti Gizmodo, mempunyai reka letak di mana sebahagian daripada tatal kandungan dengan bar skrol utama penyemak imbas manakala bahagian lain kekal tetap. Walaupun ini mungkin kelihatan rumit, ia boleh dicapai sepenuhnya melalui CSS.

Penyelesaian

Untuk mencipta kesan ini, kita perlu mempertimbangkan beberapa aspek:

• Pemusatan Mendatar: Pastikan reka letak keseluruhan dipusatkan secara mendatar dalam tetingkap penyemak imbas.
• Tatal Kandungan Utama: Benarkan kandungan utama di sebelah kiri untuk menatal menegak menggunakan bar skrol utama.
• Bar Sisi Tetap: Pastikan bar sisi di sebelah kanan tetap di bahagian atas tetingkap, kecuali apabila melayang di atasnya.
• Limpahan Tatal: Dayakan penatalan untuk bar sisi apabila dituding di atas, membenarkannya menggunakan bar tatalnya sendiri.

Pelaksanaan

CSS:

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 */
}

Markup:

<div class="wrapper">
    <div>

Penjelasan:

• Pembungkus : Menyediakan bekas lebar tetap untuk kedua-dua kandungan utama dan bar sisi.
• Kandungan: Mentakrifkan kandungan boleh tatal utama.
• Tindan: Mencipta elemen tetap yang meliputi keseluruhan port pandangan penyemak imbas, memastikan bar sisi kekal kelihatan walaupun semasa kandungan utama ditatal.
• Bar sisi: Letakkan bar sisi di sebelah kanan dan membenarkannya untuk menatal hanya apabila dituding ke atas.

Menghalang Tatal pada Tuding Bar Sisi

Jika dikehendaki, bar sisi boleh dihalang daripada memulakan tatal apabila dituding ke atas dengan mengubah suai Struktur HTML dan CSS:

CSS:

#wrapper {
    min-width: unset;
    max-width: unset;
    height: 100%;
}

#content {
    margin-right: 0;
}

#sidebar {
    position: fixed;
    top: 0;
}

Penanda:

<div>

Atas ialah kandungan terperinci Bagaimana untuk Membuat Tatal Bar Sisi Secara Bebas Menggunakan Bar Tatal Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!