So legen Sie die Breite der Bildlaufleiste in CSS fest

In CSS können Sie den Selektor und das Breitenattribut „::-webkit-scrollbar“ verwenden, um die Breite der Bildlaufleiste festzulegen. Die Syntax lautet „::-webkit-scrollbar{width: width value;}“; wird verwendet, um die gesamte Bildlaufleiste auszuwählen, und das width-Attribut wird verwendet, um die Breite des ausgewählten Elements festzulegen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Thinkpad T480-Computer.

Die Methodenidee lautet wie folgt:

Verwenden Sie den Pseudoklassenselektor ::-webkit-scrollbar in CSS, um den Stil der Bildlaufleiste festzulegen, und legen Sie die Breite der Bildlaufleiste über das Attribut width in diesem Pseudoklassenselektor fest .

::-webkit-scrollbar Der CSS-Pseudoklassenselektor beeinflusst den Stil der Bildlaufleiste eines Elements.

Sie können die folgenden Pseudoelementselektoren verwenden, um den Bildlaufleistenstil verschiedener Webkit-Browser zu ändern:

::-webkit-scrollbar – die gesamte Bildlaufleiste

::-webkit-scrollbar-button – die Schaltfläche auf der Bildlaufleiste (Pfeile nach oben und unten)

::-webkit-scrollbar-thumb – Bildlaufschieberegler auf der Bildlaufleiste

::-webkit-scrollbar-track – Bildlaufleistenspur

::-webkit-scrollbar-track- Stück – scroll Der Spurteil der Leiste ohne Schieberegler

::-webkit-scrollbar-corner – Der Teil, der zusammentrifft, wenn sowohl vertikale als auch horizontale Bildlaufleisten vorhanden sind

::-webkit-resizer – Teilweise Gestaltung der Ecke Teil einiger Elemente (Beispiel: die ziehbare Schaltfläche des Textbereichs)

Implementierungscode:

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;  
  height: 2em;
  }
  .invisible-scrollbar::-webkit-scrollbar {
  display: none;
  }
  /* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
 .mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;  
  height: 8px;  
  background-color: #aaa; 
  /* or add it to the track */}/* Add a thumb */
  .mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
    }

Verwandte Empfehlungen: CSS-Tutorial

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