CSS Shorts: Lets Build a Custom Scroll bar

#webdev

Lets face it. We as developers and designers spends hours on designing the webpage that should looks good, feels good and drive sales/convert customer. We spends hours on micro-animations. Then Why not design the scroll too. In this artile I'll show you how to do that.

The scrollbar has basically 2 components. That is scrollbar-track and scrollbar-thumb.
And we need to tweek ::-webkit-scrollbar pseudo element to modify the look of the browser's scrollbar.

Here the code that you need to design a simple scrollbar which has a width of 10px, A black trackbar and a red thumb.

::-webkit-scrollbar {
    width: 10px;
  }

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

  ::-webkit-scrollbar-thumb {
    background: #ff5252;
  }

That's it? Well you can use vertical-scroll::-webkit-scrollbar-track {} to design the horizontal scrollbar.
You can use other css properties background, border-radius, box-shadow and similar.