Implementation of CSS scroll bar style settings

webkit scrollbar style reset

1. The scrollbar contains scrollbar buttons and a track. Tracks are further divided into track pieces and thumbs. The trace pieces are the upper and lower parts of the thumb.
2. Scrollbar corner is the intersection of horizontal and vertical angles
3. resize is used to set the small control for dragging and resizing elements at the intersection of the scroll bars

The composition structure diagram is as follows:

Once the custom style of the scroll bar is found, the browser's default style settings will become invalid and only the style defined in CSS will be used. This means that the value cannot be set for only the scrollbar button or scrollbar track.

-webkit-scrollbar /* The entire scroll bar, must be set when resetting*/
-webkit-scrollbar-button /* Buttons at both ends of the scroll bar track*/
-webkit-scrollbar-track /* Scrollbar track (including thumb and trace-piece) */
-webkit-scrollbar-track-piece /* The upper and lower (left and right) parts of the middle and lower pieces of the track*/
-webkit-scrollbar-thumb /*The small square inside the scroll bar*/
-webkit-scrollbar-corner /* Vertical and horizontal intersection angle */
-webkit-resize // A small control at the intersection of the scroll bars for dragging and resizing elements*/

You can set it in combination with the following pseudo-classes (scroll bars may be different for different operating system browsers, so you can set it according to the following pseudo-classes):

• :horizontal horizontal track, track-piect, thumb
• :vertica vertical track, track-piect, thumb
• :decrement button for up and left buttons, track-piece for up or left
• :increment button for down and right buttons, track-piece for down and right
• :start Applies to buttons and track pieces, whether the object (buttons or trace piece) is placed in front of the slider
• :end Applies to buttons and track pieces, whether the object (buttons or trace piece) is placed behind the slider
• :double-button applies to buttons and track pieces. Whether the end of the track is a pair of buttons
• :single-button applies to buttons and track pieces. Whether the end of the track is a button
• :no-button applies to track pieces. There is no button at the end of the track.
• :corner-present applies to all scrollbars, whether the corner of the scrollbar exists
• :window-inactive applies to all scrollbars, including the scrollbar area, when the focus is not on the window
• :enabled, :disabled, :hover, :active pseudo-classes also apply

In IE, you can only modify the scroll bar color

scrollbar-arrow-color:#f2f2f3; /*Up and down arrows*/
scrollbar-track-color /*bottom background color*/
scrollbar-face-color /*Scrollbar foreground color, corresponding to thumb*/
scrollbar-shadow-color /*Scrollbar edge color, thubm border*/
scrollbar-highlight-color /*Overall color of the scroll bar*/
scrollbar-base-color /* scrollbar base color*/

References

Styling Scrollbars | Webkit

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.