So legen Sie die Breite der Bildlaufleiste in CSS fest

王林
Freigeben: 2022-04-01 16:12:25
Original
14002 Leute haben es durchsucht

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.

So legen Sie die Breite der Bildlaufleiste in CSS fest

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; }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!