CSS enables the scroll bar to always be displayed and the scroll bar style to be modified
The built-in scroll bar will only be displayed when the mouse is moved up, and hidden at other times, so that it is difficult for users to see that this can be swiped, which requires the scroll bar to always be displayed on the page, and it needs to follow its own certain style to modify.
Realization effect:
Hide the original one first, and then rewrite the custom style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
height: 500px;
overflow-y: scroll;
overflow-x: hidden;
width: 50px;
border: 1px solid red;
}
ul::-webkit-scrollbar {
/* 隐藏默认的滚动条 */
-webkit-appearance: none;
}
ul::-webkit-scrollbar:vertical {
/* 设置垂直滚动条宽度 */
width: 10px;
}
ul::-webkit-scrollbar:horizontal{
/* 设置水平滚动条厚度 */
height: 2px;
}
ul::-webkit-scrollbar-thumb {
/* 滚动条的其他样式定制，注意，这个一定也要定制，否则就是一个透明的滚动条 */
border-radius: 8px; /* 设置滚动条的圆角 */
border: 2px solid rgba(255,255,255,.4); /* 设置滚动条的边框 */
background-color: rgba(0, 0, 0, .5); /* 设置滚动条的颜色填充 */
}
</style>
</head>
<body>
<ul>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
<li>30</li>
</ul>
</body>
</html>