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