CSS erzielt den Effekt, die Bildlaufleiste auszublenden und den Inhalt zu scrollen (drei Möglichkeiten)

Wir begegnen dieser Situation häufig bei der Front-End-Entwicklung, wo wir das Scrollen unterstützen müssen, während die Bildlaufleiste ausgeblendet wird. Am einfachsten ist es, ein iscroll-Plug-In hinzuzufügen, aber tatsächlich kann CSS diese Funktion mittlerweile auch erreichen. Ich habe es an vielen Stellen verwendet. Schauen wir uns diese drei Methoden einmal an.

Methode 1: Berechnen Sie die Breite der Bildlaufleiste und blenden Sie sie aus

In der Sidebar dieser Seite können Sie erkennen, dass beim Frontend-Tagesreport keine Scrollleiste vorhanden ist, Sie können den Inhalt aber scrollen, indem Sie mit der Maus darüber fahren. Was ist das für eine Technologie? Tatsächlich habe ich die Bildlaufleiste einfach durch die Positionierung ausgeblendet.

Demo

Hier ist eine vereinfachte Version des Codes.

<div Klasse="Außencontainer">
    <div Klasse="innerer Container">
     ......
    </div>
</div>
.Außencontainer{
 Breite: 360px;
 Höhe: 200px;
 Position: relativ;
 Überlauf: versteckt;
}
.innerer-container{
 Position: absolut;
 links: 0;
 oben: 0;
 rechts: -17px;
 unten: 0;
 Überlauf-x: versteckt;
 Überlauf-y: scrollen;
}

Dieser Code verschiebt die Bildlaufleiste geschickt um 17 Pixel nach rechts, was genau der Breite der Bildlaufleiste entspricht. Ich habe diesen Wert durch manuelles Debuggen erhalten. In Chrome und IE wurde kein Problem gefunden.

Methode 2: Verwenden Sie drei Container, um es zu umgeben. Die Breite der Bildlaufleiste muss nicht berechnet werden.

Ich habe diesen Code zum ersten Mal in einem Microsoft-Blog gesehen. Er ähnelt meiner obigen Idee, außer dass sie eine zusätzliche Box hinzugefügt haben, um den Inhalt innerhalb der Box einzuschränken. Auf diese Weise können Sie scrollen, ohne die Bildlaufleiste zu sehen.

Der Code lautet wie folgt:

<div Klasse="Außencontainer">
     <div Klasse="innerer Container">
        <div Klasse="Inhalt">
            ......
        </div>
     </div>
 </div>
//Code von http://caibaojian.com/hide-scrollbar.html
.element, .äußerer-container {
  Breite: 200px;
  Höhe: 200px;
}

.Außencontainer {
  Rand: 5px durchgehend lila;
  Position: relativ;
  Überlauf: versteckt;
}

.innerer-Container {
  Position: absolut;
  links: 0;
  Überlauf-x: versteckt;
  Überlauf-y: scrollen;
}

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

Methode 3: Die Bildlaufleiste mit CSS ausblenden

Gleichzeitig beschreibt der Artikel auch eine Methode zum Ausblenden der Bildlaufleiste über CSS. Diese Methode ist jedoch nicht mit dem IE kompatibel und kann nur für mobile Endgeräte verwendet werden.
Dies ist der Pseudoobjektselektor der benutzerdefinierten Bildlaufleiste::-webkit-scrollbar. Weitere Einzelheiten finden Sie im vorherigen Artikel: CSS3 benutzerdefinierter Webkit-Bildlaufleistenstil

Chrome und Safari

.element::-webkit-scrollbar { Breite: 0 !wichtig }
Internet Explorer 10+

.element { -ms-overflow-style: keine; }
Feuerfuchs

.element { Überlauf: -moz-scrollbars-none; }

Zusammenfassen

Damit ist dieser Artikel über die Verwendung von CSS zum Ausblenden der Bildlaufleiste und zum Scrollen des Inhalts (drei Möglichkeiten, dies zu erreichen) abgeschlossen. Weitere Informationen zur Verwendung von CSS zum Ausblenden der Bildlaufleiste und zum Scrollen des Inhalts finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!