How To Create a Custom Scrollbar using CSS only

You can create a custom scrollbar using CSS. Here are the steps to create a simple custom scrollbar.

We then use the ::-webkit-scrollbar pseudo-element to style the scrollbar. The ::-webkit-scrollbar-track property sets the background color of the scrollbar track, which is the area behind the scrollbar handle. The ::-webkit-scrollbar-thumb property sets the background color of the scrollbar handle, which is the part of the scrollbar that you can drag to scroll the content.

You can also add additional styles to the scrollbar, such as width, height, border-radius, and box-shadow, to make it more visually appealing. The ::-webkit-scrollbar-thumb:hover property sets the background color of the scrollbar handle when it's being hovered over by the user.

Note that this approach only works in WebKit-based browsers such as Google Chrome and Safari. To make it work in other browsers, you can use vendor prefixes such as -moz and -ms, or use a library such as PerfectScrollbar or SimpleBar.