div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？

div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？
纯手写 滚动条隐藏掉就行了
CSS:

   *{
       margin:0px;padding:0px;
    }
    .wrap{
        overflow: hidden;
        height: 40px;
    }
    .cont{
        height: 60px;
        overflow-x: auto;
        overflow-y:hidden ;
        position: relative;
    }
    .state {
        left: 0px;
        top: 0px;
        position: absolute;
        height: 60px;
        background-color: rgb(84, 46, 69);
        overflow-x: auto;  
        white-space: nowrap;
        display: flex;          
    }
    
    .state li{
        display: inline-block;
        float: left;
        font-size: 13px;
        text-decoration: none;
        color: #999;
        padding: 1px 5px;
        border-bottom: 2px solid rgb(84, 46, 69);
    }
    
    .state .active {
        font-weight: bold;
        color: #ff6c00; 
        border-color: rgb(84, 46, 69);          
    }

<div class="wrap">
<div class="cont">
<ul class="state">
    <li class="active">111</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
    <li>222</li>
</ul>
</div>
</div>