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

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!

<<:  ICO-Spiegelcode zu HTML hinzufügen (favicon.ico wird im Stammverzeichnis abgelegt)

>>:  Detailliertes Tutorial zum Bereitstellen einer benutzerdefinierten Apollo-Umgebung mit Docker-Compose

Artikel empfehlen

Vue3+Skript-Setup+ts+Vite+Volar-Projekt

Inhaltsverzeichnis Erstellen Sie ein Vue + TS-Pro...

5 MySQL-GUI-Tools, die Ihnen bei der Datenbankverwaltung empfohlen werden

Es gibt viele Datenbankverwaltungstools für MySQL...

So laden Sie Projekte im Linux-System in die Code Cloud hoch

Erstellen Sie ein neues Projekt test1 auf Code Cl...

Wie können die Transaktionseigenschaften von MySQL InnoDB sichergestellt werden?

Vorwort Wenn Sie jemand fragt: „Was sind die Merk...

Detaillierte Erläuterung des Problemfalls beim Löschen des Vue KeepAlive-Cache

Keepalive wird häufig zum Caching in Vue-Projekte...

Vorteile und Probleme des XHTML CSS Website Designs

XHTML ist die derzeit international verbreitete S...

Über die richtige Art und Weise der Zeitumrechnung in JS beim Excel-Import

Inhaltsverzeichnis 1. Grundlagen 2. Problembeschr...

Detaillierte Beispiele für Docker-Compose-Netzwerke

Ich habe heute mit den Netzwerkeinstellungen unte...

Mehrere Möglichkeiten, die Lesbarkeit von Webseiten zu verbessern

1. Verwenden Sie kontrastierende Farben. Mit Kont...

Javascript zum Wechseln von Bildern per Mausklick

In diesem Artikelbeispiel wird der spezifische Ja...