Bagaimana untuk menetapkan lebar bar skrol css

Tetapan lebar bar skrol CSS

Apabila membangunkan tapak web, kita selalunya perlu membuat bar skrol untuk mengendalikan kandungan halaman. Untuk bar skrol umum, gaya lalai penyemak imbas biasanya memenuhi keperluan. Walau bagaimanapun, untuk bar skrol yang memerlukan penyesuaian khas, kami perlu menyesuaikannya melalui CSS. Artikel ini akan memperkenalkan cara menetapkan lebar bar skrol dalam CSS.

Gaya asas bar skrol CSS

Dalam CSS, kita boleh menggunakan ::-webkit-scrollbar pseudo-class selector untuk memilih bahagian bar skrol penyemak imbas dan menetapkan gayanya .

Sebagai contoh, kod berikut akan memilih bar skrol penyemak imbas, menetapkan lebarnya kepada 10px dan menetapkan latar belakangnya kepada kelabu:

::-webkit-scrollbar {
    width: 10px;
    background-color: #f5f5f5;
}

Gaya asas ini mudah ditindih, jadi kita boleh Tambah gaya lain di belakangnya untuk menyesuaikan bar skrol.

Tingkatkan lebar bar skrol

Jika anda ingin menambah lebar bar skrol, anda hanya perlu menambah atribut lebar pada gaya asas. Contohnya:

::-webkit-scrollbar {
    width: 20px;
    background-color: #f5f5f5;
}

Ini akan melaraskan lebar bar skrol kepada 20px.

Ringkasan

Melalui CSS, kami boleh menyesuaikan gaya bar skrol. Menggunakan ::-webkit-scrollbar pseudo-class pemilih, kita boleh memilih bahagian bar skrol penyemak imbas dan menggayakannya. Untuk menambah lebar bar skrol, cuma tambahkan atribut lebar. Untuk lebih banyak tetapan gaya bar skrol, sila rujuk tutorial lain tentang gaya bar skrol CSS.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan lebar bar skrol css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!