Cara Mengubah Tampilan Scrollbar Website dengan CSS

Cara Mengubah Tampilan Scrollbar Website dengan CSS

Banba
Cara Mengubah Tampilan Scrollbar Website dengan CSS

Hallo teman-teman, selamat datang di Blog Codebanba. Kali ini, saya akan membagikan sebuah tutorial mengenai cara mengubah tampilan scrollbar website. Pada tutorial ini, kita akan menggunakan CSS untuk mengubahnya. Karena itu, pastikan kamu sudah memahami CSS.

Disini, saya asumsikan bahwa kamu sudah bisa menggunakan CSS. Karena itu, tanpa banyak basa-basi lagi langsung saja kita masuk ke inti pembahasannya.

Cara mengubah tampilan scrollbar

Menurut W3School, untuk bisa mengubah tampilan scrollbar pada sebuah website. Terdapat sebuah element pseudo khusus untuk scrollbar. Element tersebut bisa kita gunakan untuk mengubah lebar, tinggi atau warna scrollbar.

Berikut element pseudo yang bisa mengkustom scrollbar browser:

  • ::-webkit-scrollbar - element pseudo ini mengatur keseluruhan dari scrollbar.
  • ::-webkit-scrollbar-track - element pseudo ini mengatur seluruh lintasan dari scrollbar.
  • ::-webkit-scrollbar-track-piece - element pseudo ini mengatur litasan dari scrollbar yang tidak tertutupi oleh tanda panah atau kendali.
  • ::-webkit-scrollbar-thumb - element pseudo ini hanya mengatur bagian tombol yang dapat diseret.
  • ::-webkit-scrollbar-corner - element pseudo ini mengatur bagian pojok penghubung antara Scroolbar Horizontal dan Vertical.
  • ::-webkit-scrollbar-button - element pseudo ini mengatur tombol kendali. Seperti tombol panah ke atas dan ke bawah yang terdapat pada lintasan scrollbar. Kamu bisa mengaturnya dengan menggunakan element ini.

Untuk cara menggunakannya, silahkan ikuti ulasan di bawah ini.

Membuat kustom scrollbar

Untuk studi kasus, disini saya akan membuat kustom scrollbar dengan thumb berwarna merah dan track berwarna abu-abu. Kemudian saya akan membuat ukuran scrollbar menjadi agak kecil. Untuk melakukan itu, pertama kita harus menulis element CSS berikut.

css
::-webkit-scrollbar {
  width: 5px; /* Ukuran scrollbar */
}

Sesuai dengan pengalaman saya, jika element di atas tidak kita tulis. Maka beberapa element pseudo yang saya sebutkan tadi, tidak akan berfungsi. Karena itu, pastikan element tersebut ditulis.

Pada element ini, property width akan mengatur lebar untuk scrollbar vertical. Sedangkan property height, akan mengatur tinggi Scollbar Horizontal.

Setelah itu, saya akan memberikan warna pada track atau lintasannya. Untuk bisa melakukan itu, saya akan menggunakan element berikut ini.

css
::-webkit-scrollbar-track {
  background-color: #ddd; /* Warna track */
}

Sekarang, saya akan memberi warna pada tombol kontrolnya. Saya akan menggunakan element pseudo ini.

css
::-webkit-scrollbar-thumb {
  background-color: #ff0000; /* Warna handler/thumb */
}

Selain warna, kamu juga bisa memberikan property CSS lain seperti border-radius pada element tersebut.

Kode lengkapnya bisa kamu lihat di bawah ini.

css
::-webkit-scrollbar {
  width: 5px;
}

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

::-webkit-scrollbar-thumb {
  background-color: #ff0000;
}

Untuk hasil dari kode di atas, bisa kamu lihat contohnya di bawah ini.

Perlu kamu ketahui, kode di atas akan mengubah semua scrollbar yang ada pada website kamu. Jika kamu ingin memberikan kode berbeda pada sebuah element spesifik. Seperti tag div dengan class='text'. Kamu bisa menulisnya seperti ini:

css
.text::-webkit-scrollbar {
  width: 5px;
}

.text::-webkit-scrollbar-track {
  background-color: #ddd;
}

.text::-webkit-scrollbar-thumb {
  background-color: #ff0000;
}

Dengan menambahkan element class secara spesifik pada setiap element pseudo. Maka kode tersebut hanya berfungsi pada element yang memiliki class='text' saja.

Contoh kustom scrollbar

Contoh 1

css
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.15);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,0,0,0.25);
}

::-webkit-scrollbar-thumb:active {
  background-color: rgba(0,0,0,0.25);
}

Contoh 2

css
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #44A08D, #093637);
  border-radius: 10px;
}

Contoh 3

css
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background-color: rgba(255,255,255,0.08);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #CC95C0, #DBD4B4, #7AA1D2);
  border-radius: 10px;
}
Demo

Kesimpulan

Element terpenting untuk mengkustom scrollbar browser, yaitu ::-webkit-scrollbar. Setelah itu, kamu bisa menggunakan element pseudo lainnya. Sebenarnya hanya itu saja untuk mengubah tampilan scrollbar website. Tidak ada kode atau elemen lain yang di butuhkan. Oke, semoga tutorial ini bisa kamu pahami dengan baik. Jika masih bingung, kamu bisa bertanya lewat kolom komentar. Terimakasih sudah berkunjung dan seboga bermanfaat.

Related articles

Comments