Cara Custom Scrollbar Website Agar Terlihat Menarik

    Yoo pada artikel kali ini kita akan membahas scrollbar, mungkin ada yang belum mengetahui jika tampilan scrollbar website atau blog bisa kita custom atau edit sesuai keinginan kita.

ketika kita membuka sebuah website / blog maka pasti akan ada scrollbarnya, pada umumnya scrollbar terdapat di sebelah kanan layar, tampilannya default tapi ada beberapa blog yang meng-custom scrollbar agar terlihat menarik dan clean saat di lihat. (lebih mantap jika warnanya di padukan template atau tema blog).

Cara Custom Scrollbar Website Agar Terlihat Menarik

Cara custom scrollbar cukup simpel, kalian cukup terapkan kode css di bawah ini kedalam ]]></b:skin> atau </style>.

::-webkit-scrollbar {
   width: 12px;
}
::-webkit-scrollbar-track {
   background: #f90;
}
::-webkit-scrollbar-thumb {
   background: blue;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
   background: black;
}

Simpan dan lihat hasilnya.

-webkit ini berfungsi untuk Google Chrome, Opera dan Safari. Untuk menerapkan custom scrollbar pada Mozilla perlu dengan JavaScript.

Scrollbar Safari

Walaupun dengan -webkit saja sudah dapat diterapkan untuk Safari terkadang beberapa kasus masih ada yang tidak berfungsi, karena itu kalian bisa terapkan kode css di bawah ini.

::-ms-scrollbar {
   width: 12px;
}
::-ms-scrollbar-track {
   background: #f90;
}
::-ms-scrollbar-thumb {
   background: blue;
}
::-ms-scrollbar-button:start:decrement,
::-ms-scrollbar-button:end:increment {
   background: black;
}

Kode di atas ini hanya berbeda sedikit dari kode sebelumnya -webkit menjadi -ms, untuk berjaga - jaga jangan menghapus kode sebelumnya -webkit supaya bisa diterapkan juga pada Chrome dan Opera.

Custom Scrollbar didalam tag Class atau ID tertentu

Penjelasan dan pemasangan di atas adalah untuk scrollbar default atau bawaan dari HTML, jadi semua scrollbar yang ada di blog kalian akan otomatis berubah semua menjadi sama, tapi jika kalian ingin merubah tampilan scrollbar tertentu misalkan kalian mempunyai blog tutorial dan menggunakan pre code nah cara ini cocok buat kalian, scrollbar ini dibuat sendiri menggunakan identitas class / id / div / dan lainnya. Maka dari itu perlu menerapkan nama dari class / id tertentu.

Misalnya saja kalian membuat sebuah kotak box yang terdapat scrollbar dan untuk contohnya saja menggunakan div dengan nama class hiiroscrollbar. Maka pada kode CSS perlu diawali dengan nama class .hiiroscrollbar contohnya seperti ini.

.hiiroscrollbar::-ms-scrollbar {
   width: 12px;
}
.hiiroscrollbar::-ms-scrollbar-track {
   background: #f90;
}
.hiiroscrollbar::-ms-scrollbar-thumb {
   background: blue;
}
.hiiroscrollbar::-ms-scrollbar-button:start:decrement,
.hiiroscrollbar::-ms-scrollbar-button:end:increment {
   background: black;
}

Maka perubahan hanya akan berlaku pada scrollbar yang ada di class hiiroscrollbar yang baru saja kita buat tadi.

Sebagai catatan kode di atas hanya sebagai contoh, kalian bisa menambahkan kode CSS sesuai dengan keinginan kalian seperti bentuk, warna, dan ukurannya.

Jika pada Opera tidak berfungsi, tambahkan kode baru dengan awalan -o-. Awalnya semua browser termasuk pada Mozilla pun bisa hanya menggunakan CSS3 seperti yang di awali -moz-, tapi dengan alasan karena Mozilla tidak menyukai kebanyakan pemilik situs sering mengubah gaya scrollbarnya secara rutin maka ditiadakanlah fitur ini. Maka perlu JavaScript untuk mengubah scrollbar pada Mozilla.

Mungkin itu saja untuk artikel kali ini, terima kasih.