So implementieren Sie den benutzerdefinierten CSS3-Bildlaufleistenstil

In diesem Artikel wird hauptsächlich der Beispielcode des benutzerdefinierten CSS3-Bildlaufleistenstils vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

Bildlaufleisten sind eine sehr häufige Sache, aber die Bildlaufleisten einiger Browser sehen wirklich nicht sehr gut aus. Das Folgende kann als Studie verwendet werden, um die Implementierung benutzerdefinierter Bildlaufleisten zu diskutieren Ihre Bildlaufleisten Es kann schön sein. Allerdings kann ich nur zum Spaß spielen, denn es ist nur für Browser mit Webkit-Kern!

Überlauf-Einführung

Definition: Das Überlaufattribut gibt an, ob Inhalte abgeschnitten, Bildlaufleisten gerendert oder Inhalte angezeigt werden sollen, wenn der Container auf Blockebene überläuft.

Attributwert

overflow:visible    //默认值。内容不会被修剪，超出内容会显示在元素框之外
overflow:hidden     //内容会被修剪。超出内容被隐藏
overflow:scroll     //内容会被修剪，浏览器会显示滚动条以便查看其余内容
overflow:auto       //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:inherit     //规定从该父元素继承overflow属性的值

Hinweis: Keine Version von Internet Explorer (einschließlich IE8) unterstützt den Attributwert „ erben".

Wenn der Überlauf auf einen anderen Wert als den Standardwert (sichtbar) eingestellt ist, wird ein Kontext auf Blockebene (eine Möglichkeit zum Löschen von Floats) erstellt. Weitere Informationen finden Sie unter Ausführliche Informationen zu BFC und Randreduzierung

Tipps

Sie können die folgenden Attribute verwenden, um den überschüssigen Teil der aktuellen Textzeile zu behandeln. (Gleichzeitig müssen Sie den Breitenwert des Elements sowie overflow:hidden; und white-space:nowrap; festlegen)

text-overflow:clip       //修剪文本。
text-overflow:ellipsis   //显示省略符号来代表被修剪的文本。
text-overflow:string     //使用给定的字符串来代表被修剪的文本。

Sie müssen es für mehrzeiligen Text verwenden. Nicht standardmäßiges Attribut – webkit-line-clamp, das hier nicht im Detail besprochen wird.

Horizontale und vertikale Bildlaufleisten

Verwenden Sie overflow-x und overflow-y , um horizontale bzw. vertikale Bildlaufleisten festzulegen.

Benutzerdefinierte Bildlaufleisten-Implementierung

Dieser Teil ist für Browser mit Webkit-Kern. Er verwendet Pseudoklassen, um den Standardstil der Bildlaufleiste zu ändern folgt:

Die Komponente der Rollstange

1. :: -webkit-SCROLLLBAR Rollstangen-Gesamtteil

2. :: Kann sich auf und ab bewegen (oder links oder rechts)
3. ::-webkit-scrollbar-track             Die Spur der Bildlaufleiste (mit Daumen innen)                                                                     Mit den Schaltflächen an beiden Enden der Spur können Sie die Position der kleinen Quadrate feinabstimmen indem Sie darauf klicken.
5. ::-webkit-scrollbar-track-piece Die innere Spur, der mittlere Teil der Bildlaufleiste
6. ::-webkit-scrollbar-corner Die Ecke, wo sich die vertikale und die horizontale Bildlaufleiste befinden Bildlaufleisten-Schnittpunkt
7. ::-webkit-resizer Das kleine Steuerelement zum Ziehen und Anpassen der Größe des Elements am Schnittpunkt der beiden Bildlaufleisten

Das Strukturdiagramm der Bildlaufleistenzusammensetzung ist wie folgt:

Das Folgende ist eine Reihe einfacher benutzerdefinierter Bildlaufleisten-Implementierungen:

<p class="box box7">
    <p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。 这个属性定义溢出元素内容区的内容会如何处理。如果值为
        scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。
    </p>
</p>


.box8::-webkit-scrollbar {
    width: 12px;
    background-color: #eee;
}

.box8::-webkit-scrollbar-track {
    background-color: #eee;
}

.box8::-webkit-scrollbar-thumb {
    background: #3DB6A4;
}

.box8::-webkit-scrollbar-button:start {
    background: url(./imgs/up.png) no-repeat;
    background-size: 12px 12px;
}

.box8::-webkit-scrollbar-button:end {
    background: url(./imgs/down.png) no-repeat;
    background-size: 12px 12px;
}

Mehr Die Effekte sind wie folgt:

Beachten Sie, dass es nur unter Chrome funktioniert! ! ! ! ! !

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Analyse der @font-Gesichtsregeln von CSS3

So verwenden Sie CSS, um Mausbewegungen zu implementieren verdeckt erscheinen Cover

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den benutzerdefinierten CSS3-Bildlaufleistenstil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!