使用CSS隐藏元素滚动条

追格官方小助手/ 2022年03月16日/ CSS教程/ 浏览 1948

我们经常在前端开发中遇到这种情况,隐藏滚动条的同时还需要支持滚动,通过CSS也就可以实现这个功能

一般情况,我们是通过超出隐藏和滚动属性实现滚动条,如下

.scroll-x {
    overflow-x: scroll;
    overflow-y: hidden;
}


我们通过使用自定义滚动条的伪对象选择器::-webkit-scrollbar设置隐藏滚动条,在此伪对象选择器中设置display:none样式即可隐藏滚动条。如下:

 /* 隐藏滚动条 */
.scroll-x::-webkit-scrollbar {
    display: none;
}


发表评论

暂无评论,抢个沙发...

客服 工单