suchen
HeimWeb-FrontendCSS-TutorialBenutzerdefinierter CSS3-Bildlaufleistenstil: Ausführliche Erklärung der Webkit-Bildlaufleiste

Haben Sie jemals gedacht, dass die ursprüngliche Bildlaufleiste des Browsers sehr unansehnlich ist? Gleichzeitig haben Sie auch gesehen, dass die angepassten Bildlaufleisten vieler Websites hochwertig aussehen. Sogar das Chrome32.0-Entwicklungsboard hat die ursprüngliche Bildlaufleiste aufgegeben, die viel schöner ist. Wie passt der Webkit-Browser die Bildlaufleiste an?

Vorwort

Webkit unterstützt Bereiche mit Überlaufattributen, Listenfeldern, Dropdown-Menüs und benutzerdefinierten Textbereichs-Bildlaufleistenstilen, daher ist es sehr nützlich. Natürlich gibt es derzeit keinen Bildlaufleistenstil, der mit allen Browsern kompatibel ist.

Demo

Werfen wir einen Blick auf diese beiden Bildlaufleisten-Demos: Demo1 (Bildversion), Demo2 (reine CSS3-Version)

Bildlaufleiste Zusammensetzung

  • ::-webkit-scrollbar Der gesamte Teil der Bildlaufleiste

  • ::-webkit-scrollbar-thumb Das kleine Quadrat darin Die Bildlaufleiste kann sich nach oben und unten bewegen (oder nach links und rechts, je nachdem, ob es sich um eine vertikale oder horizontale Bildlaufleiste handelt)

  • ::-webkit-scrollbar-track Die Spur des Bildlaufleiste (die Thumb enthält)

  • ::-webkit-scrollbar-button Schaltflächen an beiden Enden der Spur der Bildlaufleiste, mit denen Sie die Position des kleinen Quadrats um feinabstimmen können darauf klicken.

  • ::-webkit-scrollbar-track-piece Innere Spur, mittlerer Teil der Bildlaufleiste (entfernt)

  • ::-webkit- scrollbar-corner Ecke, also der Schnittpunkt zweier Bildlaufleisten

  • ::-webkit-resizer Die kleine Ecke am Schnittpunkt zweier Bildlaufleisten, die zum Anpassen der Größe des Elements verwendet wird durch Ziehen von Control

Kurze Version

Der detaillierte Code wird hier nicht veröffentlicht. Sie können die spezifischen Stileinstellungen finden, indem Sie sich den Quellcode in der Demo ansehen. Werfen wir einen Blick auf den Stil der zweiten Bildlaufleiste in Demo2


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
	width: 16px;
	height: 16px;
	background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

Detaillierte Einstellungen

Um Bildlaufleisten zu definieren, werden Pseudoelemente und Pseudoklassen verwendet. Was sind also Pseudoelemente und Pseudoklassen? Jeder sollte mit den

-Pseudoklassen vertraut sein: link, :focus, :hover Darüber hinaus wurden viele Pseudo--Klassenselektoren zu CSS3 hinzugefügt, wie zum Beispiel: nth-child , :last-child, :nth-last-of-type() usw.

Sie haben die Pseudoelemente in CSS schon einmal gesehen: :first-line, :first-letter,:before,:after. Dann wurde in CSS3 das Pseudoelement angepasst und ein „:“ zum vorherigen hinzugefügt, das jetzt „::first-letter,::first-line,::before,::after“ lautet. Darüber hinaus fügt CSS3 auch eine „::selection“ hinzu. Zwei „::“ und ein „:“ werden in CSS3 hauptsächlich zur Unterscheidung von Pseudoklassen und Pseudoelementen verwendet.

Webkits Implementierung von Pseudoklassen und Pseudoelementen ist sehr stark. Die Bildlaufleiste kann als Seitenelement definiert und mit einigen erweiterten CSS3-Attributen wie Farbverläufen, abgerundeten Ecken, RGBa usw. kombiniert werden. Wenn Sie dann an einigen Stellen Bilder verwenden müssen, können Sie die Bilder auch in Base64 konvertieren, andernfalls müssen Sie jedes Mal mehrere Bilder laden und die Anzahl der Anfragen erhöhen.

Jedes Objekt kann eingestellt werden: Ränder, Schatten, Hintergrundbilder usw. Die erstellte Bildlaufleiste vervollständigt weiterhin ihr interaktives Verhalten gemäß den Einstellungen des Betriebssystems selbst. Die folgenden Pseudoklassen können auf die oben genannten Pseudoelemente angewendet werden. Es ist etwas kompliziert, wie man es schreibt. Dort gibt es auch Kommentare.

:horizontal
//horizontal伪类适用于任何水平方向上的滚动条

:vertical
//vertical伪类适用于任何垂直方向的滚动条

:decrement
//decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片,例如可以使区域向上或者向右移动的区域和按钮

:increment
//increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片,例如可以使区域向下或者向左移动的区域和按钮

:start
//start伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的前面

:end
//end伪类适用于按钮和轨道碎片。表示对象(按钮 轨道碎片)是否放在滑块的后面

:double-button
//double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。

:single-button
//single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。

:no-button
no-button伪类表示轨道结束的位置没有按钮。

:corner-present
//corner-present伪类表示滚动条的角落是否存在。

:window-inactive
//适用于所有滚动条,表示包含滚动条的区域,焦点不在该窗口的时候。

::-webkit-scrollbar-track-piece:start {
/*滚动条上半边或左半边*/
}

::-webkit-scrollbar-thumb:window-inactive {
/*当焦点不在当前区域滑块的状态*/
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
/*当鼠标在水平滚动条下面的按钮上的状态*/
}

Das obige ist der detaillierte Inhalt vonBenutzerdefinierter CSS3-Bildlaufleistenstil: Ausführliche Erklärung der Webkit-Bildlaufleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
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
'CSS4' Update'CSS4' UpdateApr 11, 2025 pm 12:05 PM

Da ich das CSS4¹ zum ersten Mal eingemischt habe, gab es eine Menge mehr Diskussion darüber. Ich werde meine Lieblingsgedanken von anderen hier zusammenschließen. Es gibt

Die drei Arten von CodeDie drei Arten von CodeApr 11, 2025 pm 12:02 PM

Jedes Mal, wenn ich ein neues Projekt starte, organisiere ich den Code, den ich in drei Typen oder Kategorien betrachte, wenn Sie möchten. Und ich denke, diese Typen können auf angewendet werden

Https ist einfach!Https ist einfach!Apr 11, 2025 am 11:51 AM

Ich war schuldig, die Komplexität von Https öffentlich beklagt zu haben. In der Vergangenheit hat ich SSL-Zertifikate von Drittanbietern gekauft und hatte Probleme

HTML -DatenattributehandbuchHTML -DatenattributehandbuchApr 11, 2025 am 11:50 AM

Alles, was Sie schon immer über Datenattribute in HTML, CSS und JavaScript wissen wollten.

Unveränderlichkeit im JavaScript verstehenUnveränderlichkeit im JavaScript verstehenApr 11, 2025 am 11:47 AM

Wenn Sie in JavaScript noch nicht mit Unveränderlichkeit gearbeitet haben, ist es möglicherweise einfach, sie mit der Zuweisung einer Variablen für einen neuen Wert oder einer Neuzuweisung zu verwechseln.

Benutzerdefinierte Styling -Formulareingaben mit modernen CSS -FunktionenBenutzerdefinierte Styling -Formulareingaben mit modernen CSS -FunktionenApr 11, 2025 am 11:45 AM

Es ist durchaus möglich, benutzerdefinierte Kontrollkästchen, Optionsfelder und Schalter zu erstellen und gleichzeitig semantisch und zugänglich zu bleiben. Wir brauchen nicht einmal eine

FußnoteFußnoteApr 11, 2025 am 11:34 AM

Es gibt spezielle Superset -Nummer -Charaktere, die manchmal perfekt für Fußnoten sind. Hier sind sie:

So erstellen Sie einen animierten Countdown -Timer mit HTML, CSS und JavaScriptSo erstellen Sie einen animierten Countdown -Timer mit HTML, CSS und JavaScriptApr 11, 2025 am 11:29 AM

Haben Sie jemals einen Countdown -Timer für ein Projekt benötigt? Für so etwas ist es möglicherweise natürlich, nach einem Plugin zu greifen, aber es ist tatsächlich viel mehr

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

Dreamweaver Mac

Dreamweaver Mac

Visuelle Webentwicklungstools

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung