How to hide scroll bars in css

Mobile terminal

The mobile page only needs to be compatible with Chrome and Safari, so you can use the pseudo-class selector of the custom scroll bar::-webkit-scrollbar to hide the scrollbar.

.container::-webkit-scrollbar { display: none; }

(Recommended tutorial:CSS tutorial)

PC side

The PC side has relatively higher compatibility requirements, so everything can Another way, the general idea is to wrap a parent container div outside the content div, set overflow: hidden, set the content div to display-x: hidden; display-y: auto; and finally set the width of the parent container div to be smaller than the width of the content div. Or just set the margin-right of the content div to a negative value.

 
 
1111
 
222
 
333
 
444
 
 
 .outer { width: 300px; height: 300px; overflow: hidden; .content { width: 330px; /*margin-right: -15px;*/ height: 100%; overflow-x: hidden; overflow-y: auto; background: red; padding-top: 100px; p:not(:first-child) { margin-top: 100px; } } }

Recommended related video tutorials:css video tutorial

The above is the detailed content of How to hide scroll bars in css. For more information, please follow other related articles on the PHP Chinese website!