This is the sixth day of my participation in Gwen Challenge
There are often modules to scroll in development, and the original style can affect the customer experience. For faster development in the future, we are now deepening the image.
Attribute profile
Pay attention to::-webkit-scrollbarAvailable only in webKit-enabled browsers. When using the::-webkit-scrollbar
After that, the default styles will disappear altogether
::-webkit-scrollbar
The entire scrollbar style.width
Control the width of the vertical scroll bar,height
Horizontal scroll bar width.
<! DOCTYPEhtml>
<html lang="en">
<style>
body {
display: flex;
}
.scrollbar {
width: 100px;
height: 100px;
overflow: scroll;
}
.test {
width: 200px;
height: 400px;
margin: 0 auto;
}
.scrollbar::-webkit-scrollbar {/* scrollbar style */ width:10px; /* Vertical scroll bar width */
height: 10px; /* Horizontal scroll bar width */
background: # 000;
}
.scrollbar2 {
margin-left: 10px;
width: 100px;
height: 100px;
overflow: scroll;
}
.test2 {
width: 200px;
height: 400px;
margin: 0 auto;
}
.scrollbar2::-webkit-scrollbar {/* scrollbar style */ width:20px; /* Vertical scroll bar width */
height: 20px; /* Horizontal scroll bar width */
background: # 000;
}
</style>
<body>
<div class="scrollbar">
<div class="test">111111111111111 1111111111111111111111 11111111111 11111111111111</div>
</div>
<div class="scrollbar2">
<div class="test2"></div>
</div>
</body>
</html>
Copy the code
::-webkit-scrollbar-button
Buttons on scroll bars (up and down arrows).
/* Buttons */
.scrollbar::-webkit-scrollbar-button {
border: 1px solid #fff;
height: 10px;
width: 10px;
background-color: blueviolet;
}
/* Buttons */
.scrollbar2::-webkit-scrollbar-button {
border: 1px solid #fff;
height: 14px;
width: 14px;
background-color: blueviolet;
}
Copy the code
::-webkit-scrollbar-thumb
The scroll slider on the scroll bar.
.scrollbar::-webkit-scrollbar-thumb {
background-color: brown;
border-radius: 5px;
}
.scrollbar2::-webkit-scrollbar-thumb {
background-color: brown;
border-radius: 10px;
}
Copy the code
::-webkit-scrollbar-track
Scroll bar track.
.scrollbar::-webkit-scrollbar-track {
background-color: burlywood;
border-radius: 5px;
}
.scrollbar2::-webkit-scrollbar-track {
background-color: burlywood;
border-radius: 10px;
}
Copy the code
::-webkit-scrollbar-track-piece
The track portion of a scroll bar without a slider
.scrollbar::-webkit-scrollbar-track-piece {
background-color: cornflowerblue;
}
.scrollbar2::-webkit-scrollbar-track-piece {
background-color: cornflowerblue;
}
Copy the code
::-webkit-scrollbar-corner
The part where the vertical and horizontal scrollbars meet
.scrollbar::-webkit-scrollbar-corner {
background-color: darkgray;
}
.scrollbar2::-webkit-scrollbar-corner {
background-color: darkgray;
}
Copy the code
::-webkit-resizer
The partial style of the corner part of some elements (example: draggable button for textarea)
Resize: both is required before using ::-webkit-resizer; Property to allow the user to resize the element.
.scrollbar {
width: 100px;
height: 100px;
overflow: scroll;
resize: both;
}
.scrollbar::-webkit-resizer {
background-color: darksalmon;
}
.scrollbar2 {
margin-left: 10px;
width: 100px;
height: 100px;
overflow: scroll;
resize: both;
}
.scrollbar2::-webkit-resizer {
background-color: darksalmon;
}
Copy the code
Pseudo classes have also been added for better control of scroll bars.
:horizontal
The horizontal pseudo class represents the scroll bar used to set the horizontal direction
.scrollbar::-webkit-scrollbar-thumb:horizontal {
background-color: darkseagreen;
}
.scrollbar2::-webkit-scrollbar-track-piece:horizontal {
background-color: darkseagreen;
}
Copy the code
:vertical
The vertical pseudo class represents the scroll bar used to set the vertical direction
.scrollbar2::-webkit-scrollbar-track-piece:vertical {
background-color: darkseagreen;
}
.scrollbar::-webkit-scrollbar-thumb:vertical {
background-color: darkseagreen;
}
Copy the code
:decrement
Suitable for buttons and orbital debris. Buttons or orbital debris that represent decrement, such as areas and buttons that move the region up or to the right
.scrollbar::-webkit-scrollbar-button:decrement {
background-color: deepskyblue;
}
.scrollbar2::-webkit-scrollbar-track-piece: Decrement {/* No slider before the track portion */ background-color: deepSkyBlue; }Copy the code
:increment
Suitable for buttons and orbital debris. Represents incremental buttons or orbital debris, such as regions and buttons that move regions down or to the left
.scrollbar::-webkit-scrollbar-button:increment {
background-color: goldenrod;
}
.scrollbar2::-webkit-scrollbar-track-piece:increment {/* No slider after the track part */ background-color: goldenrod; }Copy the code
:start
Suitable for buttons and orbital debris. Indicates whether the object (button track debris) is placed in front of the slider
It has the same effect as: Decrement
- :end applies to buttons and orbital debris. Indicates whether the object (button track debris) is placed behind the slider
It has the same effect as :increment
There are also some special pseudo classes are not very useful for development, want to know can see the reference article
Commonly used way
<! DOCTYPEhtml>
<html lang="en">
<style>
body {
display: flex;
}
.scrollbar {
width: 200px;
height: 200px;
overflow-x: scroll;
}
.test {
height: 400px;
margin: 0 auto;
}
.scrollbar::-webkit-scrollbar {/* scrollbar style */ width:6px; /* The height and width correspond to the dimensions of the horizontal and vertical scroll bars */
height: 0px;
}
.scrollbar::-webkit-scrollbar-thumb {/* scrollbar-thumb */ border-radius:10px;
background-color: rgba(0.0.0.0.8);
background-image: linear-gradient(
45deg.rgba(255.255.255.0.2) 10%.rgba(255.255.255.0.8) 30%.rgba(255.255.255.0.5) 50%.rgba(255.255.255.0.5) 50%.rgba(255.255.255.0.8) 70%.rgba(255.255.255.0.5) 70%.rgba(255.255.255.0.2) 100%
);
}
.scrollbar::-webkit-scrollbar-track {/* scrollbar-track */ box-shadow: inset0 0 5px rgba(0.0.0.0.2);
background: #ededed;
border-radius: 2px;
}
</style>
<body>
<div class="scrollbar">
<div class="test">11111111111111 111111111 1111111111111111 111111111111111111111111 1</div>
</div>
</body>
</html>
Copy the code
Linear-gradient property is mainly used to set gradients to achieve different styles.
Refer to the article
Webkit kernel scrollbar