Seputar Custom Scrollbar CSS pada Firefox dan Chrome - Blog - Naufaldi Rafif Satriya

Problem

Desainer merekomendasikan untuk melakukan custom scrollbar pada salah satu desain di page. Custom scrollbar merubah tidak hanya warna scroll pada browser melainkan juga meliputi ukuran scrollbar.

Pranala

Saat saya mencoba untuk mencari tahu pseudo class dari scrollbar, sangat disayangkan ternyata custom scrollbar tidak disupport pada Firefox dan Edge. Termasuk pada Firefox terbaru yang saat ini saya gunakan yaitu versi 84. Bahkan saat saya menuju halaman MDN Firefox, disebutkan bahwa pseudo class ini bukan versi standard

Versi Non Standard

[

::-webkit-scrollbar

The ::-webkit-scrollbar CSS pseudo-element affects the style of the scrollbar of an element.

](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar?ref=blog.naufaldi.com)

Lantas bagaimana dengan prefix firefox? Bukankah ada? Sayangnya saat mencoba untuk mencarinya, saya tidak menemukan banyak artikel yang membantu. Bahkan di stackoverflow disebutkan, tidak ada alternative(?) untuk prefix firefox.

Bagaimana dengan Chrome? Tentu saja Chrome support pseudoclass untuk melakukan custom pada scrollbar.

Scrollbar Custom pada Chrome

Scrollbar Custom pada Firefox

Jadi ya baiknya nanti ketika user menggunakan Firefox katakanlah untuk menggantinya dan menggunakan Chrome untuk performance maksimal.

Solusi

Salah satu solusi yang bisa saya sarankan adalah dengan menggunakan vanilla Javascript untuk mengganti Scroll yang ada dengan menggunakan pustaka SimpleBar

Custom Scroll berfungsi dengan baik di Firefox

[

Home

SimpleBar does only one thing: replace the browser’s default scrollbar with a custom CSS-styled one without losing performances. For React, Vue, Angular or VanillaJS!

](http://grsmto.github.io/simplebar/?ref=blog.naufaldi.com)

Bisa pula menggunakan pustaka kalau teman-teman menggunakan ReactJS dengan React Custom Scroll

Custom Scroll berfungsi dengan baik di Firefox

Sumber Pustaka di Github :

[

rommguy/react-custom-scroll

Easily customize the browser scroll bar with native OS scroll behavior - rommguy/react-custom-scroll

](https://github.com/rommguy/react-custom-scroll?ref=blog.naufaldi.com#readme)

Solusi lain adalah bilang saja ke desainernya untuk tidak menggunakan custom scrollbar.

Semoga terjawab ya mengenai custom scrollbar ini :)

Apalagi untuk teman-teman yang mencari cara untuk merubah scrollbar. Walaupun saya tidak begitu tahu, untuk apa kita merubah scrollbar ? Seberapa urgent dalam merubah scrollbar pada situs kita? Mungkin bisa dibicarakan dengan desainer atau tim produknya.

Bagikan[](https://twitter.com/share?text=Seputar Custom Scrollbar CSS pada Firefox dan Chrome&url=https://blog.naufaldi.com/seputar-custom-scrollbar/ "Twitter")[](https://www.facebook.com/sharer/sharer.php?u=https://blog.naufaldi.com/seputar-custom-scrollbar/ "Facebook")[](https://www.linkedin.com/shareArticle?mini=true&url=https://blog.naufaldi.com/seputar-custom-scrollbar//&title=Seputar Custom Scrollbar CSS pada Firefox dan Chrome "LinkedIn")[](/cdn-cgi/l/email-protection#96a9e5e3f4fcf3f5e2abc5f3e6e3e2f7e4b6d5e3e5e2f9fbb6c5f5e4f9fafaf4f7e4b6d5c5c5b6e6f7f2f7b6d0ffe4f3f0f9eeb6f2f7f8b6d5fee4f9fbf3b0f7fbe6adf4f9f2efabfee2e2e6acb9b9f4faf9f1b8f0f7faf2ffb8eeefecb9e5f3e6e3e2f7e4bbf5e3e5e2f9fbbbe5f5e4f9fafaf4f7e4b9 "Email")

Topik ReactJS Tutorial Insight CSS

[

Membandingkan TailwindCSS dengan Framework Lain

Pranala TailwindCSS merupakan sebuah Framework CSS yang dibuat oleh Adam Wathan. Tidak…

24 Nov 2020

](/membandingkan-tailwindcss-dengan-framework-lain/)[

Cara Import SVG di NextJS

Permasalahan Sebenarnya, untuk import SVG,JPG, Webp dan extension image lain, secara…

15 Nov 2020

](/cara-import-svg-di-nextjs/)