Pure CSS to hide the scroll bar but still have the scrolling effect (mobile and PC)

Mobile

Mobile pages only need to be compatible with Chrome and Safari, so you can use the custom scroll bar pseudo-class selector ::-webkit-scrollbar to hide the scroll bar.

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

PC

The compatibility requirements of the PC side are relatively higher, so you can try another method. The general idea is to wrap a parent container div outside the content div, set overflow: hidden, set display-x: hidden; display-y: auto for the content div; finally, set the width of the parent container div to be smaller than the width of the content div or 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;
     }
   }
 }

Summarize

The above is the pure CSS that I introduced to you to hide the scroll bar but still have the scrolling effect (mobile and PC). I hope it will be helpful to you!