So verbergen Sie Bildlaufleisten mithilfe von HTML und CSS

Bildlaufleisten sind ein sehr häufiges Element im Webdesign, aber manchmal möchten wir die Bildlaufleisten ausblenden und andere Methoden verwenden, um das Scrollen zu erreichen. In diesem Artikel erfahren Sie, wie Sie Bildlaufleisten mithilfe von HTML und CSS ausblenden.

Zunächst müssen wir verstehen, wie Bildlaufleisten generiert werden. Wenn in HTML der Inhalt den sichtbaren Bereich überschreitet, generiert der Browser automatisch Bildlaufleisten. Das Erscheinungsbild und Verhalten von Bildlaufleisten wird vom Betriebssystem und Browser bestimmt, und verschiedene Browser und Betriebssysteme können unterschiedliche Bildlaufleistenstile haben.

Um die Bildlaufleiste auszublenden, müssen wir CSS verwenden, um den Stil des Bildlaufbereichs zu steuern. Wir können die overflow-Eigenschaft in CSS verwenden, um den Überlauf von Inhalten zu steuern, und das Pseudoelement ::-webkit-scrollbar verwenden, um den Stil der Bildlaufleiste zu steuern.

Sehen wir uns zunächst an, wie Sie die Overflow-Eigenschaft verwenden, um die Bildlaufleiste auszublenden. Wir können die Überlaufeigenschaft des Containers, in dem die Bildlaufleiste ausgeblendet werden muss, auf „Ausgeblendet“ setzen. Wenn der Inhalt überläuft, generiert der Browser auf diese Weise keine Bildlaufleisten, der Inhalt ist jedoch weiterhin scrollbar.

Zum Beispiel kann der folgende Code verwendet werden, um die Bildlaufleiste eines div-Elements auszublenden:

<div style="height: 200px; width: 200px; overflow: hidden;">
  ...
</div>

Wir können das Überlaufattribut auf „Auto“ statt auf „Hidden“ setzen, sodass die Bildlaufleiste nur angezeigt wird, wenn der Inhalt überläuft. Dann können wir das Pseudoelement ::-webkit-scrollbar in CSS verwenden, um den Stil der Bildlaufleiste zu steuern.

Das Folgende ist der Beispielcode:

<style>
  .scrollbar-container {
    height: 200px;
    width: 200px;
    overflow: auto;
  }
  
  .scrollbar-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  .scrollbar-container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 3px;
  }
  
  .scrollbar-container::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }
</style>

<div class="scrollbar-container">
  ...
</div>

Im obigen Code erstellen wir zunächst ein div-Element, das den Inhalt enthält, der gescrollt werden muss. Wir setzen die Höhe und Breite dieses div-Elements auf 200 Pixel und seine Überlaufeigenschaft auf „Auto“, sodass die Bildlaufleiste nur angezeigt wird, wenn der Inhalt überläuft.

Dann verwenden wir das Pseudoelement ::-webkit-scrollbar in CSS, um den Stil der Bildlaufleiste zu steuern. Wir legen zunächst die Breite und Höhe der Bildlaufleiste fest und geben dann die Hintergrundfarbe und den Randradius des Bildlaufleisten-Daumens an. Schließlich legen wir die Hintergrundfarbe der Bildlaufleistenspur fest.

In diesem Beispiel verwenden wir das Pseudoelement ::-webkit-scrollbar der WebKit-Browser-Engine, um den Stil der Bildlaufleiste zu steuern. Wenn Ihre Website andere Browser unterstützen muss, müssen Sie möglicherweise andere Pseudoelemente verwenden, um den Stil der Bildlaufleiste zu steuern.

Bevor wir zum Schluss kommen, müssen wir darauf hinweisen, dass die meisten Mainstream-Browser derzeit diese Methode zum Ausblenden der Bildlaufleiste unterstützen, einige ältere Browser wie IE und Edge jedoch nicht enthalten. Wenn Sie mit diesen älteren Browsern kompatibel sein müssen, können Sie dies tun kann JavaScript verwenden, um die Sichtbarkeit der Bildlaufleiste zu steuern.

Das obige ist der detaillierte Inhalt vonSo verbergen Sie Bildlaufleisten mithilfe von HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!