Leran How to - Custom Scrollbar Using Pure CSS

Here we will understand about custom scrollbar using pure css. css property -webkit-scrollbar can modify the scroll bar of your browser , using this we can change color, height & width of scrollbar.


Live example below ↓

Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed

Where does it come from?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed

Where can I get some?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed

How we can make it ?

  • style.css

    /* width */ ::-webkit-scrollbar { width: 10px; height: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; }

Above ↑ the code you need to paste in your css file and see the result

Note -webkit-scrollbar prefix is not supported by Firefox or IE and Microsoft Edge.