.bigbox{
/* Set the style of the scroll bar */
::-webkit-scrollbar {
width: 8px;
height: 10px;
background-color: #f5f5f5;
}
/*Define scroll bar track
Inner shadow + rounded corners */
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
/* define the slider
Inner shadow + rounded corners */
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #dcdfe6;
}
}
There are mainly the following 7 attributes
::-webkit-scrollbar The overall part of the scroll bar, you can set the width or something
::-webkit-scrollbar-button Buttons at both ends of the scroll bar
::-webkit-scrollbar-track Outer track
::-webkit -scrollbar-track-piece Inner scroll groove
::-webkit-scrollbar-thumb Scroll bar
::-webkit-scrollbar-corner Corner
::-webkit-resizer Define the style of the bottom right drag blockThe above are the main setting properties of the scroll bar, as well as more detailed CSS properties
:horizontal horizontal scroll bar
:vertical vertical scroll bar
:decrement applies to buttons and inner track pieces. It is used to indicate whether the button or the inner track will reduce the position of the viewport (eg, above the vertical scrollbar, left of the horizontal scrollbar.)
:increment Decrement is similar, used to indicate whether the button or inner track will increase the position of the window (for example, below the vertical scroll bar and to the right of the horizontal scroll bar.)
The :start pseudo-class also applies to buttons and sliders. It is used to define whether the object is placed in front of the slider.
:end is similar to the start pseudo-class, and identifies whether the object is placed behind the slider.
:double-button This pseudo-class is used for buttons and inner tracks. Used to determine whether a button is one of a pair of buttons placed at the same end of the scroll bar. For inner tracks, it indicates whether the inner track is next to a pair of buttons.
:single-button Similar to the double-button pseudo-class. For buttons, it is used to determine whether a button is independently in a section of the scroll bar. For inner tracks, it indicates whether the inner track is next to a single-button.
:no-button is used for the inner track, indicating whether the inner track should scroll to the end of the scroll bar, for example, when there are no buttons at both ends of the scroll bar.
:corner-present For all scrollbar tracks, indicates whether scrollbar rounded corners are displayed.
:window-inactive For all scrollbar tracks, indicates whether a page container (element) to which the scrollbar is applied is currently active. (In recent versions of webkit, this pseudo-class can also be used for the ::selection pseudo-element. The webkit team has plans to extend this and push to become a standard pseudo-class)
1 If it is the browser's scroll bar, it depends on the html tag, we don't need to set it, the content overflow will appear automatically
/* Just hide the overflow style of the html tag */
html {
overflow-x:hidden; //Hide the horizontal scroll bar
overflow-y:hidden;//Hide the vertical scroll bar
}
2 Set in the div box that needs to call out the scroll bar
overflow: scroll //When the content overflows, the scroll bars of the x-axis and y-axis will be displayed
overflow-y: scroll //When the content overflows, only the y scroll bar will be called out [commonly used]
overflow-x: scroll //When the content overflows, only the x scroll bar will be called out