纯CSS怎样实现隐藏滚动条?隐藏滚动条的好处就是保留了滚动条效果,但是不显示滚动条,能提升网站的美化效果。那么我们在移动端和PC端做隐藏滚动条是一样的吗?
移动端
移动端页面只要兼容 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端的实现,PC端需要考虑更多兼容性的问题。当然,本文只是提供了一种实现思路,代码仅供参考,想要了解更多可以继续浏览群英网络其他相关的文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理