<!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滚动条一直显示,不消失
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
移动端 实现ul横向滚动条
隐藏滚动条
块级元素 ios -
DIV 随着滚动条 移动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
中国移动 JavaScript ASP XHTML HTML