Custom scrollbar-CSS tricks

Customize the scrollbar style of documents and elements with scrollable overflow on the WebKit platform.

HTML CODE:

<div class="custom-scrollbar">
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Iure id exercitationem nulla qui repellat laborum vitae,
        molestias tempora velit natus. Quas, assumenda nisi.
        Quisquam enim qui iure, consequatur velit sit?
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Iure id exercitationem nulla qui repellat laborum vitae,
        molestias tempora velit natus. Quas, assumenda nisi.
        Quisquam enim qui iure, consequatur velit sit?
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Iure id exercitationem nulla qui repellat laborum vitae,
        molestias tempora velit natus. Quas, assumenda nisi.
        Quisquam enim qui iure, consequatur velit sit?
    </p>
</div>

CSS CODE:

/* Document scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
 
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Scrollable element */
.some-element::webkit-scrollbar {
}

Description:

1. ::-webkit-scrollbar Position the entire scrollbar element.
2. ::-webkit-scrollbar-track Only for scroll bar tracks.
3. ::-webkit-scrollbar-thumb Aim the scroll bar thumb.

There are many other pseudo-elements that can be used to set the style of the scroll bar.