.wrap {  
    width: 100%;  
    height: 100px;  
    overflow: hidden;<span style="white-space:pre"> </span>//关键  
}  
.scroll {  
    width: 100%;  
    height: 100%;  
    padding-bottom: 100px;<span style="white-space:pre">    </span>//height + padding-bottom 必须大于.wrap height  
    overflow-x: auto;  
}  
.content {  
    width: 500%;  
    height: 100%;  
    background: linear-gradient(90deg,blue 50px,yellow 50px,yellow 100px);  
    background-size: 100px 120px;  
}

<p class="wrap">  
    <p class="scroll">  
        <p class="content"></p>  
    </p>  
</p>

主要用在移动端，在pc端同overflow: hidden没区别，因为滚动条已被隐藏想移动也移动不了