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.

<div class="outer">
    <div class="content">
      <p>1111</p>
      <p>222</p>
      <p>333</p>
      <p>444</p>
    </div>
</div>
 .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!