【Front end tutorial】Modification of scrollbar style

Browser default scroll bar

Let’s take a look at the default scroll bar style of the browser

Browser default scroll bar style

Is the gray scroll bar on the right in the picture a bit ugly?

It is really ugly. In many needs or scenarios, we want our own scroll bar style, so we need to modify the scroll bar style with CSS

So how to modify it? We continue to look

How to control scroll bar style

First we need to know that there are two types of scroll bars:

  • Horizontal scroll bar
  • Vertical scroll bar, the above picture belongs to vertical scroll bar

Let’s take vertical scroll bar as an example

The scroll bar is composed of three parts: scroll bar, up and down arrow direction, middle track

Let me first look at the overall style of the scroll bar

1
2
3
4
5
6
7
8
9
/**
 * This is the overall style of the control scroll bar
 * Control the width of the vertical scroll bar
 * Or control the height of the horizontal scroll bar
 */
::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}

Next look at the slider inside the scroll bar

1
2
3
4
5
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  background: #535353;
}

Finally look at the track of the scroll bar

1
2
3
4
5
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}

Combining these three pseudo-element settings, let’s look at the final effect:

New scroll bar style

The right side of the picture above is our modified scroll bar style, is it showing off a bit …

Start adding your own scroll bar style in your code

Persist in original technology sharing, your support will encourage me to continue to create!