Bagaimana untuk Membuat DIV Tertentu Boleh Ditatal Menggunakan Bar Tatal Utama Penyemak Imbas?

Menatal DIV dengan Bar Tatal Utama Penyemak Imbas

Pertanyaan

Masalah:

Anda sedang bergelut untuk menjajarkan kandungan halaman web secara berpusat sambil membuat DIV tertentu boleh ditatal menggunakan bar skrol utama penyemak imbas.

Objektif:

Untuk mencipta reka letak berpusat mendatar dengan bahagian utama sebelah kiri kandungan boleh ditatal secara menegak oleh bar skrol utama penyemak imbas dan bar sisi sebelah kanan ditetapkan di bahagian atas, menjadi boleh ditatal hanya apabila tetikus melayang di atasnya.

Penyelesaian

Manakala contoh Gizmodo menggabungkan skrip untuk pengendalian bar sisi, kesan yang diingini boleh dicapai dengan CSS tulen. Penyelesaiannya melibatkan:

1. Memusatkan reka letak secara mendatar sambil melaraskan untuk saiz tetingkap yang berbeza
2. Mencipta bahagian kandungan utama boleh tatal secara menegak menggunakan bar skrol penyemak imbas
3. Membetulkan bar sisi dengan fungsi tatal berasingan yang mengambil alih apabila perlu

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

Penanda:

<div class="wrapper">
    <div>

Penyesuaian

Kedua-dua kandungan utama dan lebar bar sisi boleh dikonfigurasikan seperti yang dikehendaki. Ambil perhatian bahawa bar sisi bukan anak bekas penatal kandungan utama untuk mengelakkan peristiwa tatal menggelegak daripada bar sisi. Ini membolehkan gelagat menatal berasingan.

Kesimpulan

Penyelesaian ini menyediakan reka letak terpusat dengan keupayaan menatal bebas untuk kandungan utama dan bar sisi, menggunakan bar skrol utama penyemak imbas untuk kandungan utama.

Atas ialah kandungan terperinci Bagaimana untuk Membuat DIV Tertentu Boleh Ditatal Menggunakan Bar Tatal Utama Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!