Bagaimana untuk menukar gaya bar skrol dengan css

Dalam pembangunan web, bar skrol ialah ciri yang kerap digunakan. Walau bagaimanapun, gaya bar skrol lalai penyemak imbas tidak selalu memenuhi keperluan pembangun atau pengguna. Oleh itu, kita boleh menukar rupa bar skrol melalui gaya CSS.

CSS3 menyediakan satu set atribut unsur pseudo untuk menyesuaikan bar skrol. Atribut ini boleh digunakan untuk menukar gaya bar skrol. Berikut ialah beberapa atribut yang biasa digunakan:

• ::-webkit-scrollbar: Bertindak pada pelayar teras webkit (Chrome dan Safari)
• ::-moz-scrollbar: Acts on Firefox penyemak imbas
• ::-o-scrollbar: Acts on Opera browser
• ::-ms-scrollbar: Acts on Internet Explorer browser

kami Gunakan penyemak imbas Chrome sebagai contoh untuk memperkenalkan cara menggunakan CSS untuk menukar gaya bar skrol.

Pertama, kita perlu menggunakan elemen pseudo di atas untuk memilih bar skrol:

/* 选中垂直滚动条 */
::-webkit-scrollbar {
  width: 10px; /* 设置滚动条宽度 */
}

/* 选中水平滚动条 */
::-webkit-scrollbar-horizontal {
  height: 10px; /* 设置滚动条高度 */
}

/* 选中滚动条轨道 */
::-webkit-scrollbar-track {
  background: #eee; /* 设置滚动条轨道颜色 */
}

/* 选中滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #aaa; /* 设置滚动条滑块颜色 */
}

Dalam kod, kami menggunakan 4 elemen pseudo untuk memilih bahagian bar skrol yang berbeza , iaitu:: -webkit-scrollbar, ::-webkit-scrollbar-horizontal, ::-webkit-scrollbar-track dan ::-webkit-scrollbar-thumb.

Antaranya, ::-webkit-scrollbar digunakan untuk memilih keseluruhan bar skrol dan menetapkan lebar bar skrol. ::-webkit-scrollbar-horizontal digunakan untuk memilih bar skrol mendatar dan menetapkan ketinggian bar skrol. ::-webkit-scrollbar-track digunakan untuk memilih bahagian trek bar skrol dan menetapkan warna trek. ::-webkit-scrollbar-thumb digunakan untuk memilih bahagian slider bar skrol dan menetapkan warna slider.

Jika anda ingin mencapai kesan gaya apabila meluncur ke atas peluncur, anda boleh menggunakan kelas pseudo tuding untuk memilih peluncur:

/* 选中滑过滚动条滑块部分 */
::-webkit-scrollbar-thumb:hover {
  background: #666;
}

Selain atribut gaya yang diperkenalkan di atas , terdapat beberapa Harta lain yang boleh digunakan untuk menukar rupa bar skrol, seperti jejari sempadan, bayang kotak, dsb. Perlu diingatkan bahawa kebanyakan sifat ini hanya sah dalam pelayar webkit, dan pelaksanaan pelayar yang berbeza mungkin sedikit berbeza.

Selain itu, kami juga boleh menggunakan perpustakaan CSS pihak ketiga, seperti Perfect Scrollbar dan JScrollPane, untuk lebih mudah melaksanakan gaya bar skrol tersuai.

Ringkasnya, melalui gaya CSS, kami boleh menukar penampilan bar skrol dengan sangat fleksibel untuk mencapai pengalaman pengguna dan reka bentuk web yang lebih baik.

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