overflow:auto在移动端无法显示滚动条的解决方法

最新推荐文章于 2024-08-08 13:08:58 发布

BKOO_94

最新推荐文章于 2024-08-08 13:08:58 发布

阅读量4.3k

点赞数

分类专栏：移动端 css 文章标签：前端 css 移动端

本文链接：https://blog.csdn.net/BKOO_94/article/details/103239224

版权

移动端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

overflow:auto在移动端无法显示滚动条的解决方法（CSS）

项目中发现overflow:auto；在PC端是能显示出滚动条的；但是将代码部署到移动端时，发现滚动条不见了
后来在网上找到了一种比较简单的解决方法，是通过css来改变滚动条的样式(仅供参考)

HTML示例代码

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>

CSS示例代码

ul{height: 150px; width: 80px; overflow: auto; border: 1px solid #ccc;}
ul::-webkit-scrollbar-track-piece{background-color: rgba(0,0,0,0); border-left: 1px solid rgba(0,0,0,0);}
ul::-webkit-scrollbar{width: 5px; -webkit-border-radius:5px; -moz-border-radius: 5px; border-radius: 5px;}
ul::-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;}
ul::-webkit-scrollbar-thumb:hover{background-color: rgba(0,0,0,0.5); -webkit-border-radius:5px; -moz-border-radius: 5px; border-radius: 5px;}