CSS example code for setting scroll bar style

The CSS implementation code for setting the scroll bar style is as follows:

•::-webkit-scrollbar The entire scroll bar
•::-webkit-scrollbar-thumb The small square inside the scroll bar can be moved up and down (or left or right, depending on whether it is a vertical scroll bar or a horizontal scroll bar)
•::-webkit-scrollbar-track The track of the scroll bar (with Thumb inside)
•::-webkit-scrollbar-button The buttons at both ends of the scrollbar track allow you to fine-tune the position of the small square by clicking.
•::-webkit-scrollbar-track-piece Inner track, the middle part of the scroll bar (removed)
•::-webkit-scrollbar-corner The corner, where the two scroll bars meet
•::-webkit-resizer A small control at the intersection of two scroll bars for resizing an element by dragging

/*Define the scroll bar height and width and the background height and width corresponding to the size of the horizontal and vertical scroll bars respectively*/
::-webkit-scrollbar
{
    width: 16px;
    height: 16px;
    background-color: #F5F5F5;
}
/*Define the inner shadow + rounded corners of the scroll bar track*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
/*Define the inner shadow + rounded corners of the slider*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

Detailed settings

Defining scroll bars uses pseudo-elements and pseudo-classes, so what are pseudo-elements and pseudo-classes?

Everyone should be familiar with pseudo-classes: link, :focus, :hover. In addition, many pseudo-class selectors have been added to CSS3, such as :nth-child, :last-child, :nth-last-of-type(), etc.

You have seen pseudo-elements in CSS before: :first-line, :first-letter, :before, :after. Then in CSS3, the pseudo-elements were adjusted, and a ":" was added on the previous basis, which means now it has become "::first-letter,::first-line,::before,::after", and CSS3 also added a "::selection". Two "::" and one ":" are mainly used to distinguish pseudo-classes and pseudo-elements in CSS3.

Webkit's implementation of pseudo-classes and pseudo-elements is very powerful. The scroll bar can be defined as a page element and combined with some advanced CSS3 properties, such as gradients, rounded corners, RGBa, etc. Then if you need to use pictures in some places, you can convert the pictures into Base64, otherwise you have to load multiple pictures every time, increasing the number of requests.

Any object can be set: border, shadow, background image, etc. The created scroll bar will still complete its interactive behavior according to the settings of the operating system itself. The following pseudo-classes can be applied to the above pseudo-elements. It's a little complicated. You can see the first demo for details on how to write it. There are also comments there.

:horizontal
//The horizontal pseudo-class applies to any horizontal scroll bar: vertical
//The vertical pseudo-class applies to any vertical scroll bar: decrement
//The decrement pseudo-class applies to buttons and track pieces. A button or track fragment that represents a decrement, such as a region or button that can move a region up or to the right: increment
//The increment pseudo-class applies to buttons and track pieces. Indicates an incremental button or track fragment, such as a region or button that can move a region down or to the left: start
//The start pseudo-class applies to buttons and track pieces. Indicates whether the object (button track fragment) is placed in front of the slider: end
//end pseudo-class applies to buttons and track pieces. Indicates whether the object (button track fragment) is placed behind the slider: double-button
//The double-button pseudo-class applies to both buttons and track pieces. Determines whether the track ends at a pair of buttons. That is, the orbital debris is next to a pair of buttons together.
:single-button
//The single-button pseudo-class applies to both buttons and track pieces. Determines whether the end of the track is a button. That is, the orbital fragments are next to a separate button.
:no-button
The no-button pseudo-class indicates that there is no button at the end of the track.
:corner-present
//The corner-present pseudo-class indicates whether the corner of the scroll bar exists.
:window-inactive
//Applicable to all scroll bars, indicating the area containing the scroll bar when the focus is not on the window.
::-webkit-scrollbar-track-piece:start {
/* scroll bar upper or left half */
}
::-webkit-scrollbar-thumb:window-inactive {
/*When the focus is not in the current area slider state*/
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
/*State when the mouse is on the button below the horizontal scroll bar*/
}

Summarize

The above is the example code of setting scroll bar style with CSS introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!