使用CSS隐藏元素滚动条

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

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

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

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

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