Membuat Custom Scrollbar dengan CSS

#css

Pada artikel kali ini kita akan membahas bagaimana membuat custom scrollbar anda sendiri agar sesuai dengan desain ui atau aplikasi kita.

Untuk menambahkan scrollbar kita dapat menambahkan styling berikut pada file css kita.

/* Mozilla */
:root {
  scrollbar-width: thin !important;
  scrollbar-color: #ea580c #ffffff !important;
}

/* For Chrome, EDGE, Opera, Others */
::-webkit-scrollbar {
  width: 1rem;
}

::-webkit-scrollbar-track {
  background: #ffffff;
}

::-webkit-scrollbar-thumb {
  background: #ea580c;
}

::-webkit-scrollbar-thumb {
  background: #ea580c;
}

Jika berhasil maka akan tampil seperti berikut.

Kalian bisa customisasi color sesuai dengan yang anda inginkan. Kode diatas akan merubah default scrollbar pada browser kita, Jika kalian ingin menerapkannya untuk custom box, atau elemen tertentu dapat kalian bungkus dengan custom elemen seperti

/* Mozilla */
.scroller {
  overflow-y: scroll;
  scrollbar-color: #0a4c95 #c2d2e4;
}

/* Other */
.scroller::-webkit-scrollbar {
  width: 1rem;
}
.scroller::-webkit-scrollbar-track {
  background: #ffffff;
}

.scroller::::-webkit-scrollbar-thumb {
  background: #ea580c;
}

.scroller::-webkit-scrollbar-thumb {
  background: #ea580c;
}

Atau mungkin jika kalian ingin menerapkan darkmode kita dapat menggunakan custom variables seperti berikut, dalam contoh darkmode dibawah menggunakan tailwind.css untuk melakukan toggle darkmode sehingga kita dapat memiliki akses terhadap kelas .dark dan .light.

Didalam kelas tersebut kita dapat membuat sebuah custom variabel untuk menyimpan data warna yang kemudian dapat kita gunakan seperti berikut.

/* For Mozilla */
.dark {
  --scrollbar-color: /* your custom color */ ;
  --scrollbar-color-sec: /* your custom color */ ;
  --scrollbar-color-bg: /* your custom color */ ;
}

.light {
  --scrollbar-color: /* your custom color */ ;
  --scrollbar-color-sec: /* your custom color */ ;
  --scrollbar-color-bg: /* your custom color */ ;
}
:root {
  scrollbar-color: var(--scrollbar-color) var(--scrollbar-color-bg) !important;
  scrollbar-width: thin !important;
}

/* For Chrome, EDGE, Opera, Others */
::-webkit-scrollbar {
  width: 0.75em;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-color-sec);
}

Sekian untuk artikel kali ini, semoga penjelasan diatas dapat membantu anda dalam membuat custom scrollbar anda sendiri 😄