Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar. The following example creates a thin (10px wide) scrollbar, which has a grey track/bar color and a dark-grey (#888) handle:
You can customize the width of the scrollbar as required. You can also customize the color of the scrollbar track, which is the background of the scrollbar, and the color of the scrollbar thumb, which is the draggable handle of the scrollbar.
A scrollbar is an interaction technique or widget in which continuous text, pictures, or any other content can be scrolled in a predetermined direction (up, down, left, or right) on a computer display, window, or viewport so that all of the content can be viewed, even if only a fraction of the content can be seen on a device's screen at one time.
Use the scrollbar-width and scrollbar-color properties to style scrollbars. From Chrome version 2 it's been possible to style scrollbars with the ::-webkit-scrollbar-* pseudo-elements. This approach works fine in Chrome and Safari, but was never standardized by the CSS Working Group.
To style a scroll bar you need to be familiar with the anatomy of a scrollbar. Have a look at this illustration: The two main components to keep in mind here are: The track is the background beneath the bar. The thumb is the part that the user clicks and drags around.
With this generator, you can easily customize the appearance and colors of scrollbars on your website. Simply adjust the options below and the preview area will update instantly so you can see the changes in real time. The required CSS code is generated automatically, allowing you to copy and paste it directly into your project.
In this tutorial, you will learn how to use CSS to customize scrollbars to support modern browsers. To follow along with this article, you will need: Familiarity with the concepts of vendor prefixes, pseudo-elements, and graceful degradation.
Use the scrollbar CSS property to create custom themes for scrollbars. See property values and examples.