Bagaimana untuk membuat: scroll bar yang disesuaikan

Belajar bagaimana untuk membuat scroll bar yang disesuaikan menggunakan CSS.

Scroll bar yang disesuaikan

Coba sendiri

Coba sendiri

Perhatian:Firefox atau versi Edge sebelum 79 tidak mendukung scroll bar yang disesuaikan.

Bagaimana untuk membuat scroll bar yang disesuaikan

Chrome, Edge, Safari dan Opera mendukung non-standard ::-webkit-scrollbar Pseudonya yang memungkinkan kami untuk mengubah penampilan scroll bar browser.

Misalnya di bawah ini menciptakan scroll bar lebar 10px, scroll bar ini memiliki jalur/ warna bar abu-abu dan slider abu-abu gelap (#888):

/* Lebar */
::-webkit-scrollbar {
  width: 10px;
}
/* Layanan */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Slider */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Slider saat mouse hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Coba sendiri

Misalnya ini menciptakan scroll bar dengan efek bayangan:

Contoh

/* Lebar */
::-webkit-scrollbar {
  width: 20px;
}
/* Layanan */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* Slider */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Coba sendiri

Pemilih scroll bar

Untuk browser webkit, Anda dapat menggunakan elemen pseudonya untuk mengubah scroll bar browser:

::-webkit-scrollbar Scroll bar itu sendiri.
::-webkit-scrollbar-button Tombol di atas scroll bar (panah naik dan turun).
::-webkit-scrollbar-thumb Slider yang dapat diseret.
::-webkit-scrollbar-track Layanan scroll bar (bar progress).
::-webkit-scrollbar-track-piece Bagian (bar progress) di dalam scroll bar yang belum di lilitkan oleh slider.
::-webkit-scrollbar-corner Bujur bawah scroll bar, bar gelombang horizontal dan vertical bertemu di sini.
::-webkit-resizer A draggable resize handle that appears at the bottom corner of some elements.