Creating a Scrollbar with a Floating Thumb

I needed a simple JavaScript/CSS solution to create a customized scrollbar with a floating thumb. This solution requires no extra libraries and is super lightweight.

In order to customize a scrollbar in CSS you need to use the -webkit tools.

The ones used in this example are:

1. ::-webkit-scrollbar → This is the whole scrollbar object.
2. ::-webkit-scrollbar-track →This is the track of the scrollbar. The part of the scrollbar behind the thumb.
3. ::-webkit-scrollbar-thumb → This is the little shape (usually a rectangle) that you drag along the scrollbar track to navigate the page.

What you will need — The container

To make a div or an element scrollable, it needs to have too much text or elements inside it to fit in the container. You can make this happen by adding more elements or changing the containers height.

You then need to set the element’s overflow to auto.

If you only want a vertical scroll: overflow-y:auto; overflow-x:hidden.

If you only want a horizontal scroll: overflow-x:auto; overflow-y:hidden.

If you want both a horizontal and a vertical scroll: overflow:auto.

How to set up the scrollbar

• webkit-scrollbar → Set the with or height of the whole scrollbar object.
• webkit-scrollbar-track →Set the background color of the track, give it solid border (start with its size being 1px) and set its overflow to auto. If you want it rounded, give it a border radius.
• webkit-scrollbar-thumb → Give it a background, a solid transparent border (*set the border using rem instead of px. This is will ensure the effect stays the same no matter the size of the screen). Set the overflow to auto. Most importantly, set the background-clip to padding-box and then add padding.

Here’s how it looks