Cara menggunakan CSS untuk mencipta gaya bar skrol tersuai

Cara menggunakan CSS untuk mencipta kesan tersuai gaya bar skrol

Dalam beberapa tahun kebelakangan ini, penyesuaian gaya bar skrol telah menjadi salah satu keperluan biasa dalam reka bentuk web. Dengan menyesuaikan gaya bar skrol, anda boleh meningkatkan estetika dan pengalaman pengguna halaman web. Artikel ini akan memperkenalkan secara terperinci cara menggunakan CSS untuk mencipta kesan tersuai bagi gaya bar skrol dan memberikan contoh kod khusus.

1 Sesuaikan gaya bar skrol

Untuk mencipta kesan tersuai gaya bar skrol, kita perlu terlebih dahulu memahami komponen bar skrol, termasuk latar belakang bar skrol, peluncur (juga dipanggil ibu jari), dan bar tatal Orbit (juga dipanggil trek), dsb.

1. Gaya latar belakang bar skrol

Gaya latar belakang bar skrol mentakrifkan gaya keseluruhan bar skrol, seperti warna latar belakang, gaya sempadan, dsb. Berikut ialah contoh kod:

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

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

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

2. Gaya peluncur

Gaya peluncur mentakrifkan bahagian bar skrol yang digunakan untuk meluncur kandungan. Anda boleh menyesuaikan warna, bentuk peluncur, dsb. Berikut ialah kod contoh:

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

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

3. Gaya trek bar skrol

Gaya trek bar skrol mentakrifkan trek latar belakang bar skrol Anda boleh menyesuaikan gaya trek, termasuk warna latar belakang, gaya sempadan, dsb. Berikut ialah contoh kod:

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

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

2. Keserasian gaya bar skrol

Contoh kod di atas ditulis untuk penyemak imbas dengan teras WebKit, seperti Chrome, Safari, dsb. Penyemak imbas yang berbeza mempunyai sokongan yang berbeza untuk gaya bar skrol, jadi kami perlu menambah penyesuaian gaya pada penyemak imbas yang berbeza dalam kod.

Berikut ialah kod penyesuaian gaya bar skrol untuk penyemak imbas yang berbeza:

/* Firefox */
 scrollbar-width: thin;
 scrollbar-color: #888 #f5f5f5;

/* Edge */
  scrollbar-width: thin;

/* Internet Explorer 10+ */
-ms-overflow-style: none;

/* Opera */
scrollbar-color: #888 #f5f5f5;

3 Penyesuaian lanjutan gaya bar skrol

Selain gaya latar belakang, trek dan gelangsar, kami juga boleh menyesuaikan lagi gaya bar skrol , seperti menambah kesan tuding, kesan klik, dsb.

Berikut ialah contoh kod untuk mencapai kesan perubahan warna bar skrol apabila tetikus melayang:

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
  transition: background-color 0.3s;
}

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

IV. Dengan menggunakan CSS, kami boleh menyesuaikan gaya bar skrol untuk menambah baik keindahan dan. keindahan halaman web. Artikel ini memperkenalkan kaedah penyesuaian gaya bar skrol asas, termasuk gaya latar belakang, peluncur dan trek serta menyediakan contoh kod praktikal. Pada masa yang sama, kami juga membincangkan keserasian dan penyesuaian lanjutan gaya bar skrol.

Saya harap artikel ini dapat membantu anda memahami dan menggunakan CSS untuk membuat penyesuaian gaya bar skrol!

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencipta gaya bar skrol tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!