CSS custom WebKit kernel browser scroll bar

For the style of the custom browser scroll bar, if the website does not consider non-WebKit kernel browsers, you can try to implement it with only CSS.

You can simply modify several items to see the effect:

:-WebKit-scrollbar {width: 12px; Height: 12px ;}/* Width of the vertical direction of the scroll bar and height of the horizontal direction */
:-WebKit-scrollbar-button {}/* Scroll bar button */
:-WebKit-scrollbar-track {}/* Scroll bar track */
:-WebKit-scrollbar-track-piece: vertical {}/* Rail part in the vertical direction of the scroll bar */
:-WebKit-scrollbar-track-piece: horizontal {}/* Tracker in the horizontal direction of the scroll bar */
:-WebKit-scrollbar-thumb {}/* Buttons on the scroll bar track */
:-WebKit-scrollbar-corner {}/* Scroll angle on the scroll bar track */

If the requirement is not high, the custom options are sufficient.

After a simple edit, the results are as follows:

If you do not know how to create a blank demo page, you can directly customize the blog's scroll bar and view it on the right. The uploaded circular graph is shown, I don't know how to change it to a square. Let's take a look.

However, if you have other requirements, you can check them out here.This is the portal go

For more examples, clickSrcollbarexample