Bagaimana membuat: Sumbu guling yang disesuaikan

Belajar bagaimana membuat sumbu guling yang disesuaikan menggunakan CSS.

Sumbu guling yang disesuaikan

Coba sendiri

Coba sendiri

Perhatian:Firefox atau versi Edge sebelum 79 tidak mendukung sumbu guling yang disesuaikan.

Bagaimana membuat sumbu guling yang disesuaikan

Chrome, Edge, Safari dan Opera mendukung non-standard ::-webkit-scrollbar Elemen pseudo yang memungkinkan kami untuk mengubah penampilan sumbu guling browser.

Misalnya, ini membuat sumbu guling dengan lebar 10px, sumbu guling ini memiliki sumbu/berwarna abu dan slider abu gelap (#888):

/* Lebar */
::-webkit-scrollbar {
  width: 10px;
}
/* Sumbu */
::-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 membuat sumbu guling dengan efek bayangan:

Contoh

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

Coba sendiri

Pemilihan sumbu guling

Untuk browser webkit, Anda dapat menggunakan elemen pseudo berikut untuk mengatur sumbu guling browser:

::-webkit-scrollbar Sumbu guling sendiri.
::-webkit-scrollbar-button Tombol di sumbu guling (panah ke atas dan ke bawah).
::-webkit-scrollbar-thumb Slider yang dapat di seret.
::-webkit-scrollbar-track Sumbu guling (barru kemajuan).
::-webkit-scrollbar-track-piece Bagian sumbu (barru kemajuan) yang belum diselubungi slider.
::-webkit-scrollbar-corner Kotak guling di ujung bawah, sumbu horizontal dan sumbu vertikal bertemu disini.
::-webkit-resizer Tangga yang dapat diseret dan diatur ukurannya yang muncul di pojok bawah beberapa elemen.