Welche Methoden gibt es, um die Bildlaufleiste der Anzeige in CSS zu überschreiten?

CSS-Methoden, die über die Anzeige von Bildlaufleisten hinausgehen: 1. Berechnen Sie die Breite der Bildlaufleiste und blenden Sie sie aus. 2. Umgeben Sie sie mit drei Containern, ohne die Breite der Bildlaufleiste zu berechnen. 3. Passen Sie die Pseudoobjektauswahl der Bildlaufleiste an bar [: :webkit-scrollbar].

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

Css geht über die Methode zum Anzeigen von Bildlaufleisten hinaus:

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

<div class="outer-container">
    <div class="inner-container">
        ......
    </div>
</div>
.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;
}

Hinweis: Dieser Code verschiebt geschickt 17 Pixel nach rechts, was genau der Breite entspricht der Bildlaufleiste. Dieser Wert wurde durch manuelles Debuggen ermittelt. Kein Problem in Chrome und IE gefunden.

Methode 2: Umgeben von drei Containern muss die Breite der Bildlaufleiste nicht berechnet werden.

Im Vergleich zu Methode 1 fügt diese Methode ein zusätzliches Feld hinzu, um den Inhalt auf das Feld zu beschränken, sodass die Bildlaufleiste dies nicht tun kann sichtbar und die Bildlaufleiste ist nicht sichtbar.

 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>
.element, .outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
  display: none;
}

Methode 3: Passen Sie die Pseudoobjektauswahl der Bildlaufleiste an::webkit-scrollbar

Diese Methode ist nicht mit IE kompatibel und kann für mobile Anwendungen verwendet werden.

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

.element { -ms-overflow-style: none; }
　　Firefox

.element { overflow: -moz-scrollbars-none; }

Empfohlene verwandte Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es, um die Bildlaufleiste der Anzeige in CSS zu überschreiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!