Mouse scrolling retains remove scrollbars

*. Sometimes the scroll bar that appears is really ugly, especially when the artist is not there, and you want to keep the mouse scrolling and remove the ugly scroll bar, you can do this:

 

*, page structure

<div>  
    <ul >        
        <li >1</li>  
        <li >2</li>  
        <li >3</li>  
        <li >4</li>  
        <li >5</li>  
    </ul>  
</div>

 

*, css is as follows

div{  
    height: 100px;  
    width: 50px;  
    overflow: hidden;  
}  
ul {  
    height: 100%;  
    width: 70px;  
    overflow-y: auto;  
    overflow-x: hidden;  
}  

 

At this point, the useful but ugly scroll bar is hidden, ahahaha~

But do you see the point?

Yes, the width of the ul is greater than the width of the outer div

As for the principle, the scroll bar of the ul is on the far right. When the width exceeds the div, hehe, the overflow: hidden of the div will "eat" the abominable scroll bar, yes, eat it! ! !

ahh~