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;注意高度就完事了。

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

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