Custom Scrollbars with CSS - the Easy way
Tags: html, css, beginners, tutorial
Published: 2022-01-06 11:13:17

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.


![Scroll Track and Scroll Thumb Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wor9c9afyaotlz3kfe7.png)

**Customizing Scrollbar Design**
The first thing we will take care of is a _[pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)_ (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. 

```css
::-webkit-scrollbar {
  width: 1rem;
  /*height: 1rem;*/
}
```
With that set, now we can design the scrollbar track, by adding background-colours to it.

```css
::-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.

```css
::-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. 

```css
::-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.

```css
::-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.

```css
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.

```css
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:


![Default Scrollbar vs Custom Scrollbar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jxun1ri6z6kx3p22zvr.png)


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](https://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.