CSS滚动效果隐藏滚动条

最近写项目用到这个东西

需求是可以横向滚动，但是要隐藏滚动条

直接上代码：

html代码
<div class="box">
<div class="scroll">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>

css代码：
<style>
.box{
width: 500px;
height: 50px;//重点
overflow: hidden;//重点
}
.scroll{
height: 68px;//重点
width: 500px;
overflow-x: scroll;//重点
overflow-y: hidden;//重点
}
ul{
width: 800px;
list-style: none;
display: flex;
}
li{
flex-grow: flex;
width: 100px;
height: 60px;
}
</style>

总结：在外层再套一个div，但是外面的div高度比内容div的高度小，这样的挡住了，不是通过设置没有了，只是看不见而已

值得注意的是：横向滚动条的高度是18px，所以要精确到1px的话，会有用。

这种方法算不上好，但是比较方便，套个盒子，加overflow:hidden;注意高度就完事了。

根据上面的方法，竖向的滚动条也可以做到这种效果。

还有其他好的方法，希望在下面留言，学习学习，谢谢！！