Custom Scrollbars with CSS - the Easy way

#html #css #beginners #tutorial

While building our favorite website we all tend to make it as perfect as possible, especially when it comes to the user interface. But a small addition to that amazing webpage can take your user’s tedious experience to the next level. Adding a customized scrollbar is one of them and actually, it is much easier to implement than you think. Without further due let’s dive into the coding.

The components of a scrollbar can be divided into its scrollbar-track and scrollbar-thumb. Track defines the base or channel and thumb is the section that helps us to navigate. Also depending on the direction of the scrollbar, it can be Horizontal and Vertical.

Customizing Scrollbar Design
The first thing we will take care of is a pseudo-element (A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph) and also -webkit browser prefix.

Next, defining the scroll bar width is important. For vertical scrollbars width and height for the horizontal ones needs to be specified.

::-webkit-scrollbar {
  width: 1rem;
  /*height: 1rem;*/
}

With that set, now we can design the scrollbar track, by adding background-colours to it.

::-webkit-scrollbar-track {
  background: #ffffff;
}

After we set a color to the base, we can move on to scrollbar thumb. Here things get a bit tricky, as this will be used by the user to navigate through the website. We may set a solid background color to the thumb or to make it more soothing here we are using linear-gradient() property.

::-webkit-scrollbar-thumb {
  background: linear-gradient(#FF5403,#EF2F88);
}

Just like any other keyword ::-webkit-scrollbar-thumb can be used to implement other pseudo-elements or selectors. One good example will be to decrease/increase the opacity on mouse hovering.

Changing the appearance of the scrollbar-thumb can make it look a lot nicer. Keep in mind applying border-radius to the thumb can also affect the way currently our scrollbar-track looks.

::-webkit-scrollbar-thumb {
  background: linear-gradient(#FF5403,#EF2F88);
  border-radius: 100vw;
  border: 0.20rem solid #ffffff;
}

To fit the track perfectly with the thumb we may apply the same border radius on scrollbar-track also. Adding margin from both top and bottom can be a sign of clever designing too, this can be done using CSS margin-block property.

::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 100vw;
  margin-block: 0.5rem;
}

But, imagine a website that consists of both horizontal and vertical scrollbars, applying ::webkit-scrollbar will change the appearance for both of them. But what if you want only to focus on the vertical bar, the way to do that is by targeting the body of the webpage.

body::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 100vw;
  margin-block: 0.5rem;
}

Similarly, for targeting horizontal bars we will use vertical-scroll to keep the body scrollbar at default and apply changes to all the horizontal ones.

vertical-scroll::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 100vw;
  margin-block: 0.5rem;
}

Concerns
There are a few details that we should take care of while designing a custom scrollbar:

firstly make sure there is a high enough contrast between your scrollbar track and thumb color, that way it’s easier for the user/reader to navigate. You can always head on to websites like colorhunt.co for color scheme references. And also remember to implement a scrollable element via adding a value other than visible to the overflow property. It’s recommended to use the auto keyword as it will only show the scrollbar if the content exceeds its container.