How to make a custom scrollbar with CSS (2 ways)

Introduction

A few days ago i talked about how to create a custom cursor, so today i decided to also talk about how to create a custom scrollbar as well. It’s pretty easy, but the reason why there’s two ways is One of the ways are available …


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Lens

Introduction

A few days ago i talked about how to create a custom cursor, so today i decided to also talk about how to create a custom scrollbar as well. It's pretty easy, but the reason why there's two ways is One of the ways are available for every browser but firefox, while the other can only be used by firefox.

Scrollbar Pseudo elements

An easy way to make a custom scroll bar is by using the psuedo element ::-webkit-scrollbar, there are also a variety a scrollbar psuedo-elements each for a specefic part of the scrollbar.

  • ::-webkit-scrollbar:horizontal stylizes the horizontal scrollbar specifically

  • ::-webkit-scrollbar:vertical stylizes the vertical scrollbar specifically

  • ::-webkit-scrollbar-track stylizes the scrollbar track, which contains the thumb (in other words it's the bar that contains the smaller scrolling bar)

  • ::-webkit-scrollbar-thumb stylizes the thumb, which is the bar that slides when scrolling

  • ::-webkit-scrollbar-button stylizes the buttons that make the thumb go up and down

As an example, i made a gradient horizontal scrollbar by stylizing the scrollbar thumb and giving a gradient background. I gave the track a light yellow background and gave the whole scrollbar a width of only 10px. You can see the code and the scrollbar down below!

/*To give the track a yellowish color*/
::-webkit-scrollbar-track {
background: #faedcd;
}

/*Shrinking the scrollbar*/
::-webkit-scrollbar {
  width: 10px;
}

/*Removing the horizontal scrollbar*/
::-webkit-scrollbar:horizontal {
  display: none;
}

/*Giving the thumb a gradient*/
::-webkit-scrollbar-thumb {
  background: linear-gradient(#4158D0, #C850C0, #FFCC70);
  border-radius: 20px;
}



Browser Support

Not every browser supports these psuedo-elements. According to MDN web docs and caniuse.com the selectors a mostly supported in every browser except firefox. That's why on our next section we're going to talk about another way that's supportive for firefox.

browser suppor for psuedo elements

Scrollbar Properties

There are also two scrollbar properties that you can use to customize an element's or website's scrollbar. For example we can use the property scrollbar-color to change the color of the scrollbar. These properties only work using firefox and there's only two of them, so i even though i'm showing you this i suggest using the psuedo-elements instead since it has more of a variety in choices and availability!

  • scrollbar-width changes the width of the scrollbar
  • scrollbar-color changes the color of the scrollbar 
body {
 scrollbar-width: 10px;
 scrollbar-color: linear-gradient(#FBAB7E, #F7CE68);
}

Conclusion

I hope this blog helps you improve your css skills some more!


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Lens


Print Share Comment Cite Upload Translate Updates
APA

Lens | Sciencx (2023-01-04T22:13:29+00:00) How to make a custom scrollbar with CSS (2 ways). Retrieved from https://www.scien.cx/2023/01/04/how-to-make-a-custom-scrollbar-with-css-2-ways/

MLA
" » How to make a custom scrollbar with CSS (2 ways)." Lens | Sciencx - Wednesday January 4, 2023, https://www.scien.cx/2023/01/04/how-to-make-a-custom-scrollbar-with-css-2-ways/
HARVARD
Lens | Sciencx Wednesday January 4, 2023 » How to make a custom scrollbar with CSS (2 ways)., viewed ,<https://www.scien.cx/2023/01/04/how-to-make-a-custom-scrollbar-with-css-2-ways/>
VANCOUVER
Lens | Sciencx - » How to make a custom scrollbar with CSS (2 ways). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/04/how-to-make-a-custom-scrollbar-with-css-2-ways/
CHICAGO
" » How to make a custom scrollbar with CSS (2 ways)." Lens | Sciencx - Accessed . https://www.scien.cx/2023/01/04/how-to-make-a-custom-scrollbar-with-css-2-ways/
IEEE
" » How to make a custom scrollbar with CSS (2 ways)." Lens | Sciencx [Online]. Available: https://www.scien.cx/2023/01/04/how-to-make-a-custom-scrollbar-with-css-2-ways/. [Accessed: ]
rf:citation
» How to make a custom scrollbar with CSS (2 ways) | Lens | Sciencx | https://www.scien.cx/2023/01/04/how-to-make-a-custom-scrollbar-with-css-2-ways/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts