DEV Community

Cover image for 2 Simple Steps to Create a CSS Custom Scrollbar

2 Simple Steps to Create a CSS Custom Scrollbar

Shefali on July 13, 2023

Introduction Scrollbars are an essential component of the web page. Default scrollbars provided by web browsers are functional, but they...
Collapse
 
3aluw profile image
Abdou

I tried it on the horizontal scroll bar, it worked but its width didn't change . any solution ?

Collapse
 
devshefali profile image
Shefali

Use height for the horizontal scrollbar and width for the vertical scrollbar

Collapse
 
3aluw profile image
Abdou

That makes a lot of sense. thank you

Collapse
 
diomed profile image
May Kittens Devour Your Soul

what does this html prefix do exactly?
because this
a) does not work on Firefox at all
b) works perfectly fine without html added before webkit in chromium based browsers

Collapse
 
delaterra profile image
Lucas Delaterra Ignes

Html prefix is to reference the html tag, so the entire document. I believe the author used it to improve compatibility.

This mozilla doc explains it better: developer.mozilla.org/en-US/docs/W...

Collapse
 
diomed profile image
May Kittens Devour Your Soul

how does this improve compatibility, when firefox doesn't at all pick up on this?
-webkit is for chromium based browsers