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
css怎么隐藏元素但不占空间css怎么隐藏元素但不占空间Jun 01, 2022 pm 07:15 PM

两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

css3什么是自适应布局css3什么是自适应布局Jun 02, 2022 pm 12:05 PM

自适应布局又称“响应式布局”,是指可以自动识别屏幕宽度、并做出相应调整的网页布局;这样的网页能够兼容多个不同的终端,而不是为每个终端做一个特定的版本。自适应布局是为解决移动端浏览网页而诞生的,能够为使用不同终端的用户提供很好的用户体验。

css3如何实现鼠标点击图片放大css3如何实现鼠标点击图片放大Apr 25, 2022 pm 04:52 PM

实现方法:1、使用“:active”选择器选中鼠标点击图片的状态;2、使用transform属性和scale()函数实现图片放大效果,语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。

css3动画效果有变形吗css3动画效果有变形吗Apr 28, 2022 pm 02:20 PM

css3中的动画效果有变形;可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果,animation属性用于设置动画样式,transform属性用于设置变形样式。

css3怎么设置动画旋转速度css3怎么设置动画旋转速度Apr 28, 2022 pm 04:32 PM

在css3中,可以利用“animation-timing-function”属性设置动画旋转速度,该属性用于指定动画将如何完成一个周期,设置动画的速度曲线,语法为“元素{animation-timing-function:速度属性值;}”。

一文了解CSS3中的新特性 ::target-text 选择器一文了解CSS3中的新特性 ::target-text 选择器Apr 12, 2022 am 11:24 AM

本篇文章带大家一起深入了解一下CSS3中的新特性::target-text 选择器,聊聊该选择器的作用和使用方法,希望对大家有所帮助!

css3线性渐变可以实现三角形吗css3线性渐变可以实现三角形吗Apr 25, 2022 pm 02:47 PM

css3线性渐变可以实现三角形;只需创建一个45度的线性渐变,设置渐变色为两种固定颜色,一个是三角形的颜色,另一个为透明色即可,语法“linear-gradient(45deg,颜色值,颜色值 50%,透明色 50%,透明色 100%)”。

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

Heiße Werkzeuge

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

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

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),