纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）
(编辑：jimmy 日期: 2024/12/29 浏览：3 次 )
移动端
移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。
.container::-webkit-scrollbar {
display: none;
}
PC 端
PC 端对兼容性的要求相对来说要高一点，所有可以换一种方法，大致思路就是在内容div外面包一个父容器div，设置 overflow: hidden，内容div设置 display-x: hidden; display-y: auto; 最后设置父容器div的宽度小于内容div的宽度或者设置内容div的 margin-right 为负值就可以了。
<div class="outer">
<div class="content">
<p>1111</p>
<p>222</p>
<p>333</p>
<p>444</p>
</div>
</div>
.outer {
width: 300px;
height: 300px;
overflow: hidden;
.content {
width: 330px;
/*margin-right: -15px;*/
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background: red;
padding-top: 100px;
p:not(:first-child) {
margin-top: 100px;
}
}
}
总结
以上所述是小编给大家介绍的纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端），希望对大家有所帮助！
下一篇：css3翻牌翻数字的示例代码