DEV Community

loading...
Cover image for Customize the scrollbar on a website

Customize the scrollbar on a website

Clément Gaudinière
Développeur de sites Web Full Stack, maîtrise l'HTML, le CSS (et par continuité le SCSS), le PHP et le JS. Passionné d'aéronautique et d'aéromodélisme.
Updated on ・3 min read

Hello everyone, today we meet again for a new tutorial, as you saw in the title, today I'm going to teach you how to customize the scroll bar of a website. This tutorial works only on some web browsers that allow this feature: Google Chrome, Microsoft Edge, Opera, and Safari. Firefox and Internet Explorer do not allow you to customize your scrollbar (at least with this method). We will first see how to customize the scroll bar on most browsers and then we will see how to customize the scroll bar on the Mozilla Firefox browser. But don't worry, just because Internet Explorer doesn't allow this feature doesn't mean the display will be bad, users just won't be able to see your beautiful scrollbar 😎. You're ready, so here we go.

Customize the scroll bar on most browsers

The basics

To customize a scrollbar on a browser, you have to use the pseudo-element ::-webkit-scrollbar, which allows to modify the style of the scrollbar.

To modify a scrollbar, there are about 7 different selectors, some properties being less interesting than others, we will focus on three properties for this tutorial, which are the following :

  • ::-webkit-scrollbar which represents the entire scrollbar. We can define with this property the width of our scrollbar.
  • ::-webkit-scrollbar-thumb which is the scrollbar. For this pseudo-element, we can apply a multitude of different parameters to apply a style: gradients, colors, border-radius, :hover...
  • ::-webkit-scrollbar-track which is the track (the progress bar) of the scrollbar, we can apply the background property.

Implementation

Now that we have seen the main properties for styling a scrollbar, we will put into practice what we have just seen through an example.

We will start with a simple HTML base, as follows:

<body>
  <h1>I'm the title</h1>
  <!-- Put a lot of text here, so that the page has to be scrolled to be seen in full. -->
  <p>[YOUR TEXT]</p>
</body>
Enter fullscreen mode Exit fullscreen mode

Let's apply some styling to our Cascading Style Sheet :

body{
  background: #252525;
  color: white;
  margin: 20px 5%;
}

h1{
  text-align: center;
}

p{
  width: 800px;
  max-width: 95%;
  text-align: justify;
  margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

And we put into practice the different properties seen previously (still in our CSS file 😉) :

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(8, 8, 8, 0.58);
  transition: all 0.15s ease-in-out;
}
::-webkit-scrollbar-track {
  background: transparent;
}
Enter fullscreen mode Exit fullscreen mode

You can see the result of our piece of code below, where I replaced the '[YOUR TEXT]' with a Lorem Ipsum :

Finishes

For a cleaner page, we can apply the CSS property overflow: overlay; to our body which will allow our scrollbar to be inside our page.

We will also refine our scollbar by applying a border-radius and a dynamic effect on mouse-over.

You can see the changes in our CSS code below :

body{
  overflow: overlay;
  background: #252525;
  color: white;
  margin: 20px 5%;
}

h1{
  text-align: center;
}

p{
  width: 800px;
  max-width: 95%;
  text-align: justify;
  margin: 0 auto;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(125, 125, 125, 1);
  border-radius: 12px;
  transition: all 0.15s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(157, 157, 154, 1);
}
::-webkit-scrollbar-track {
  background: transparent;
}
Enter fullscreen mode Exit fullscreen mode

The result with its finishes :

Customize the scroll bar on Mozilla Firefox

For Mozilla Firefox, it's simpler (already it was not very complicated 😂), since we will be able to set only two parameters which are the following scrollbar-color and scrollbar-width.

For the first parameter : scrollbar-color, you will have to fill in two color values: the first one for the scrollbar color and the second one for the background color of the scrollbar progress zone.

For the second parameter : scrollbar-width, we can set several values for the width of our scrollbar: auto, inherit, initial, none, revert, thin, or unset.

For example, to customize a scrollbar on Mozilla, we could take the following code

html{
  scrollbar-color: #e82727 #959595;
  scrollbar-width: thin;
}
Enter fullscreen mode Exit fullscreen mode

I hope this tutorial has helped you create your custom scrollbar, feel free to give me your feedback in comments ! 👍

Discussion (8)

Collapse
lamka02sk profile image
lamka02sk

There is also a way to do something similar in Firefox using actual CSS standard. You definitely should mention it. It is not as powerful, but it is honest :)

Collapse
clementgaudiniere profile image
Clément Gaudinière Author

I don't know this technique, can you tell me more ?

Collapse
lamka02sk profile image
lamka02sk

Sure, you can check the details here: developer.mozilla.org/en-US/docs/W...
It is still in a draft phase and there are only 3 options available so far: background/foreground color and width. And it only works in Firefox, beginning with version 64.

Thread Thread
clementgaudiniere profile image
Collapse
shrihankp profile image
Shrihan Kumar Padhy

We've got a lot of cool stuff with CSS, but there's the most disgusting part: BROWSER SUPPORT.

Collapse
icecoffee profile image
atulit023

I'm definitely adding that in my projects.

Collapse
clementgaudiniere profile image
Clément Gaudinière Author

Glad I could help you ! 👍

Collapse
yaireo profile image
Yair Even Or • Edited

👉 yaireo.github.io/fakescroll

Made this years ago.
It's totally awesome and as lightweight as a neutrino 🔥

Forem Open with the Forem app