Reines CSS, um die Bildlaufleiste auszublenden, aber dennoch den Bildlaufeffekt beizubehalten (mobil und PC)

Mobile

Mobile Seiten müssen nur mit Chrome und Safari kompatibel sein, daher können Sie den benutzerdefinierten Bildlaufleisten-Pseudoklassenselektor ::-webkit-scrollbar verwenden, um die Bildlaufleiste auszublenden.

  .container::-webkit-scrollbar {
    Anzeige: keine;
  }

PC

Die Kompatibilitätsanforderungen der PC-Seite sind relativ höher, daher können Sie eine andere Methode ausprobieren. Die allgemeine Idee besteht darin, ein übergeordnetes Container-Div außerhalb des Inhalts-Divs einzuschließen, „overflow: hidden“ und „display-x: hidden“ bzw. „display-y: auto“ für das Inhalts-Div festzulegen und schließlich die Breite des übergeordneten Container-Divs kleiner als die Breite des Inhalts-Divs einzustellen oder den rechten Rand des Inhalts-Divs auf einen negativen Wert festzulegen.

<div Klasse="äußere">
    <div Klasse="Inhalt">
      <p>1111</p>
      <p>222</p>
      <p>333</p>
      <p>444</p>
    </div>
</div>
 .äußeres {
   Breite: 300px;
   Höhe: 300px;
   Überlauf: versteckt;
 
   .Inhalt {
     Breite: 330px;
     /*Rand rechts: -15px;*/
     Höhe: 100%;
     Überlauf-x: versteckt;
     Überlauf-y: automatisch;
     Hintergrund: rot;
     Polsterung oben: 100px;
 
     p:nicht(:erstes-Kind) {
       Rand oben: 100px;
     }
   }
 }

Zusammenfassen

Das Obige ist das reine CSS, das ich Ihnen vorgestellt habe, um die Bildlaufleiste auszublenden, aber dennoch den Bildlaufeffekt zu haben (mobil und PC). Ich hoffe, es wird Ihnen helfen!