<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.rows {
width: 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 {
width: 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>
移動端overflow:auto滾動條一直顯示，不消失
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。