Bagaimana untuk mencantikkan dan menyesuaikan bar skrol dengan css

Dalam pembangunan web, bar skrol ialah kawalan yang biasa digunakan yang boleh membantu kandungan pada halaman dipaparkan dengan lebih baik dalam ruang terhad. Memandangkan penyemak imbas dan sistem pengendalian mempunyai gaya lalai tertentu untuk bar skrol, selalunya perlu untuk mencantikkan dan menyesuaikan bar skrol dalam CSS.

Dalam CSS, anda boleh menggunakan beberapa elemen pseudo untuk menyesuaikan gaya bar skrol. Elemen pseudo ini termasuk:

1. ::-webkit-scrollbar: digunakan dalam penyemak imbas Chrome dan Safari untuk mengawal saiz, bentuk dan gaya bar skrol.

Kod contoh:

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #dcdcdc;
  border-radius: 8px;
  border: 2px solid #f5f5f5;
}

2. ::-webkit-scrollbar-thumb: Peluncur untuk mengawal bar skrol, anda boleh mengubah suai saiz, ketelusan, Sifat seperti sebagai warna sempadan dan latar belakang. Jika gaya elemen pseudo tidak diubah suai, gaya lalai penyemak imbas akan digunakan.

Kod contoh:

::-webkit-scrollbar-thumb:hover {
  background-color: #a3a3a3;
}

::-webkit-scrollbar-thumb:active {
  background-color: #6d6d6d;
}

::-webkit-scrollbar-thumb {
  background-color: #dcdcdc;
  border-radius: 8px;
  border: 2px solid #f5f5f5;
  opacity: 0.7;
}

3. ::-webkit-scrollbar-track: Gelangsar yang digunakan untuk mengawal bar skrol, saiz dan warna latar belakangnya boleh diubah suai dan sudut bulat.

Kod contoh:

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 8px;
}

4. ::-webkit-scrollbar-corner: Digunakan untuk mengawal sudut bar skrol, warna latar belakang dan bucu bulat boleh diubah suai dan sifat-sifat lain. Elemen pseudo ini mungkin mempunyai kesan yang berbeza dalam pelayar yang berbeza.

Kod sampel:

::-webkit-scrollbar-corner {
  background-color: #f5f5f5;
  border-radius: 8px;
}

Selain itu, anda juga boleh menggunakan beberapa sifat css lain untuk mengawal gaya bar skrol, seperti warna bar skrol, lebar bar skrol , dll. Perlu diingatkan bahawa atribut ini belum lagi serasi dengan semua penyemak imbas Jika anda perlu memastikan keserasian, adalah disyorkan untuk menggunakan ::-webkit-scrollbar pseudo-element untuk mencantikkan bar skrol.

Ringkasnya, mencantikkan dan melaksanakan gaya bar skrol tersuai memainkan peranan penting dalam kepentingan halaman. Melalui penggunaan elemen pseudo dan kawalan gaya, kami boleh menjadikan bar skrol tapak web kami lebih cantik dan menambah pengalaman tingkah laku yang lebih diperibadikan, yang boleh mengurangkan banyak rintangan terhadap pengalaman tapak web masing-masing.

Akhir sekali, tidak kira tahap atau tahap mana anda berada, yang terbaik adalah mempunyai keperluan pengeluaran sebelum melakukan perkara-perkara yang tidak kemas ini!

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