脚本宝典收集整理的这篇文章主要介绍了纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
移动端
移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。
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端），希望对大家有所帮助！
以上是脚本宝典为你收集整理的纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）全部内容，希望文章能够帮你解决纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。