So löschen Sie die Bildlaufleiste in CSS

Bildlaufleiste mit CSS löschen: 1. Berechnen Sie die Breite der Bildlaufleiste, legen Sie die Position der Bildlaufleiste durch Positionierung fest und blenden Sie die Bildlaufleiste aus. 2. Verwenden Sie den Selektor „::-webkit-scrollbar“ oder das Attribut „overflow“, um die Bildlaufleiste zu löschen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-Methode zum Löschen von Bildlaufleisten 1: Berechnen Sie die Breite der Bildlaufleiste und blenden Sie sie aus

In der Seitenleiste dieser Website können Sie sehen, dass der Inhalt des Front-End-Tagesberichts keine Bildlaufleisten hat , aber wenn Sie die Maus nach oben bewegen, können Sie den Inhalt scrollen. Welche Technologie ist das? Tatsächlich verstecke ich die Bildlaufleiste einfach durch Positionierung. Demo: Hier ist eine vereinfachte Version des Codes entspricht dem Scrollen. Die Breite der Leiste. Dieser Wert wurde durch manuelles Debuggen ermittelt. Kein Problem in Chrome und IE gefunden.

Css-Methode zum Löschen von Bildlaufleisten 2: Verwenden Sie den ::-webkit-scrollbar-Selektor oder das Überlaufattribut.

Gleichzeitig wurde im Artikel auch eine Methode zum Ausblenden der Bildlaufleiste über CSS geteilt, diese Methode ist jedoch vorhanden Nicht kompatibel mit IE. Es kann von mobilen Benutzern verwendet werden. Das ist der Pseudoobjektselektor der benutzerdefinierten Bildlaufleiste::-webkit-scrollbar. Weitere Informationen finden Sie im vorherigen Artikel: CSS3 benutzerdefinierter Webkit-Bildlaufleistenstil Chrome und Safari

<div class="outer-container">
    <div class="inner-container">
    ......
    </div>
</div>

IE 10+

.outer-container{
width: 360px;
height: 200px;
position: relative;
overflow: hidden;
}
.inner-container{
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}

Firefox

.element::-webkit-scrollbar { width: 0 !important }

Demo-Adresse: http://caibaojian.com/demo/2018/3/scroll4.html

(Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonSo löschen Sie die Bildlaufleiste in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!