<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.rows {
500px;
height: 500px;
border: 1px solid red;
overflow: auto;
}
.rows::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0);
border-left: 1px solid rgba(0, 0, 0, 0);
}
.rows::-webkit-scrollbar {
5px;
height: 13px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.rows::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
background-clip: padding-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 28px;
}
.rows::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
li{
line-height: 20px;
margin: 10px;
background-color: pink;
}
</style>
</head>
<body>
<div class="rows">
<ul>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
<li>第6个li</li>
<li>第7个li</li>
<li>第8个li</li>
<li>第9个li</li>
<li>第10个li</li>
<li>第11个li</li>
<li>第12个li</li>
<li>第13个li</li>
<li>第14个li</li>
<li>第15个li</li>
<li>第16个li</li>
<li>第17个li</li>
<li>第18个li</li>
<li>第19个li</li>
<li>第20个li</li>
</ul>
</div>
</body>
</html>