How to customize scrollbars with CSS?

A scroll bar that appears at the edge of the screen when the web page is larger than the screen size.

How can I customize this scrollbar with CSS?

You may also be wondering what changes you can make and what browsers it supports.

This time, for those who want to customize their own scrollbar with CSS

I will explain according to the above items.

After reading this article, you will be able to customize the scrollbar freely using CSS .

How to customize scrollbars with CSS?

Use the following three pseudo-elements to change the design of the scrollbar using CSS.

It contains the characters “-webkit-“. This is what we call a vendor prefix. A vendor prefix is ​​an extension that each browser implements ahead of standardized CSS.

“-webkit-” is a function that can be used in browsers such as Chrome and Safari, and there are other functions such as “-moz-” that can be used in firefox.

In other words, the above selector changes the design of the scrollbar only in browsers that use webkit, such as Chrome and Safari.

In other browsers, it will be displayed as it is in the specifications of the browser.

Now let’s talk about each pseudo-element.

-webkit-scrollbar

-webkit-scrollbar is a pseudo element that allows you to specify the entire scrollbar .

You can set the width of the scrollbar.

Vertical scrollbars are defined by ‘width’ and horizontal ones by ‘height’.

html::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

If you want to change the overall scrollbar, prepend it with html. If you want it to only apply to scrollbars on specific elements, append the element name, class name, etc. instead.

Too small or too big can get unwieldy, so it’s best to keep customizations to a minimum.

It looks better to keep both values ​​the same.

-webkit-scrollbar-track

-webkit-scrollbar-track allows you to specify the base part of the scrollbar background .

You can set colors, borders, rounded corners, etc.

html::-webkit-scrollbar-track {
  background: #ccc;
  border-radius: 6px;
  border: solid 2px #333;
}

Also, if you use rgba to specify the background color, you can also change the opacity. You can also set the shadow with box-shadow.

html::-webkit-scrollbar-track {
  box-shadow: 0 0 4px #777 inset;
}

Please try various things.

-webkit-scrollbar-thumb

-webkit-scrollbar-thumb specifies the thumb part of the scrollbar .

Like -webkit-scrollbar-track, you can also set colors, borders, rounded corners, shadows, etc. here.

html::-webkit-scrollbar-thumb {
  background: skyblue;
  border-radius: 6px;
  border-top: solid 3px blue;
  border-bottom: solid 3px blue;
}

Be careful not to customize the knob part too much, such as reducing the opacity, as it may reduce visibility.

Also, a design that is inconsistent with the background is equally undesirable.

You can also specify a background image for the background color, so please take advantage of it.

html::-webkit-scrollbar-thumb {
  background: url("sample.png");
}

How to customize scrollbars in firefox?

I mentioned earlier that the browsers that can customize the scrollbar are limited.

The previous methods can only be used with browsers that use “-webkit-” such as Chrome and Safari.

Other browsers display browser-specific scrollbars, but firefox has its own setting method .

Specifically, it is described as follows.

html {
  scrollbar-width: thin;
  scrollbar-color: #ff6347 #fffacd;
}

scrollbar-width specifies the width of the scrollbar.

The initial value is auto, and if you want to make it thinner, use thin. In addition, if none is specified, it will be hidden.

These are the only three values ​​and you cannot specify the size as described above.

scrollbar-color can specify the color of the scroll bar knob and the background part at once.

The first is the color of the knob, and the second is the color of the part that the rear knob moves.

Also, you can’t specify shadows or borders like you can with webkit.

Summary: Customize your scrollbars sparingly

In this article, I will show you how to customize scrollbars using CSS.

Be careful not to overdo customization, as visibility may decrease .

Also, it is better to use it while understanding that the applicable browsers are limited.

I hope that this article will be of help to you.