In unseren beiden vorherigen Artikeln haben wir Ihnen Beispiele für die CSS-Einstellung von Div-Bildlaufleistenstilen und benutzerdefinierten CSS3-Bildlaufleistenstilen vorgestellt. Wir alle wissen, dass der Container eine Bildlaufleiste erstellt, wenn der Inhalt den Container überschreitet Verwenden wir CSS, um den Stil der Bildlaufleiste zu steuern? Heute gebe ich Ihnen eine ausführliche Einführung!
Beispiel:
/*作为IT界最前端的技术达人，页面上的每一个元素的样式我们都必须较真，就是滚动条我们也不会忽略。
下面我给大家分享一下如何通过CSS来控制滚动条的样式，代码如下：*/
/*定义滚动条轨道*/
#style-2::-webkit-scrollbar-track
{
background-color: #F5F5F5;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
}
/*定义滚动条高宽及背景*/
#style-2::-webkit-scrollbar
{
width: 10px;
background-color: rgba(0, 0, 0, 0.34);
}
/*定义滚动条*/
#style-2::-webkit-scrollbar-thumb
{
background-color: #8b8b8b;
border-radius: 10px;
}
* Um das Scrollen von Inhalten in einem einzigen Schritt zu erreichen, müssen Sie müssen drei Bedingungen erfüllen:
1. p muss auf eine feste Höhe eingestellt sein und elastische Werte wie Prozentsatz oder Auto können nicht verwendet werden.
2. Die Höhe des Inhalts muss seine eigene Höhe überschreiten.
3. Das Attribut „overflow:auto“ muss hinzugefügt werden.
*Die Bildlaufleiste ausblenden:
1. Die horizontale Bildlaufleiste entfernen:
<body style="overflow-x:hidden">
2. Die vertikale Bildlaufleiste entfernen:
<body style="overflow-y:hidden">
3. Horizontale und vertikale Bildlaufleisten ausblenden:
<body style="overflow-x:hidden;overflow-y:scroll">
4. Alle Bildlaufleisten ausblenden:
<body style="overflow:hidden">或者<body scroll="no">
Eine bessere Möglichkeit besteht darin, die Farbe der Bildlaufleiste auf „Vollständig“ einzustellen transparent, sodass Inhalte gescrollt werden können, ohne dass Bildlaufleisten angezeigt werden.
App:
Keine horizontale Bildlaufleiste:
<p style="overflow-x:hidden">test</p>
Keine vertikale Bildlaufleiste
<p style="overflow-y:hidden">test</p>
Keine Bildlaufleiste
<p style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">test</p>
Bildlaufleiste automatisch anzeigen
<p style="height:100px;width:100px;overflow:auto;">test</p>
Legen Sie die Farbe der Bildlaufleiste selbst fest. Der Code lautet wie folgt:
Body {
scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/
scrollbar-face-color: #333; /*立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #666; /*滚动条空白部分的颜色*/
scrollbar-shadow-color: #999; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*立体滚动条强阴影的颜色*/
scrollbar-track-color: #666; /*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
}Die oben genannten 2 Elemente gelten für
,,
Anhang:
Erklären Sie das Überlaufattribut und seine verschiedenen Funktionen:
overflow:visible; schneidet keinen Inhalt aus und fügt keine Bildlaufleisten hinzu. Standardwert. Wenn Sie diesen Wert verwenden, wird der Inhalt unabhängig davon, welche Werte für „Breite“ und „Höhe“ festgelegt sind, zwangsweise angezeigt, unabhängig davon, ob er den Bereich überschreitet.
Überlauf: automatisch; schneidet den Inhalt aus und fügt bei Bedarf Bildlaufleisten hinzu.
Überlauf: ausgeblendet; Inhalte, die die Höhe des Objekts überschreiten, werden nicht angezeigt.
overflow: scroll; zeigt immer eine vertikale Bildlaufleiste an.
overflow Einstellungen für horizontalen und vertikalen Inhaltsüberlauf
overflow-x Einstellungen für horizontalen Inhaltsüberlauf
overflow-y Einstellungen für vertikalen Inhaltsüberlauf
Die Werte durch die oben genannten Attribute festgelegt sind sichtbar, scrollen, ausgeblendet, automatisch
versteckt hat den gegenteiligen Effekt zu sichtbar. Alles, was über „Breite“ und „Höhe“ hinausgeht, ist unsichtbar.
Scrollen Bildlaufleisten werden angezeigt, unabhängig davon, ob der Inhalt den Umfang überschreitet.
Zusammenfassung:
Ich glaube, dass durch das Studium dieses Artikels Freunde gewonnen werden Ich hoffe, dass es für Ihre Arbeit hilfreich sein wird, die CSS-Steuerung besser zu verstehen und die Bildlaufleistenstile besser zu verstehen!
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonCSS steuert das Parsen von Bildlaufleistenstilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Wie viel Spezifität haben @Rules wie @Keyframes und @Media?Apr 18, 2025 am 11:34 AMIch habe diese Frage neulich bekommen. Mein erster Gedanke ist: seltsame Frage! Bei der Spezifität geht es um Selektoren, und Rules sind keine Selektoren, also ... irrelevant?
Können Sie @Media und @Support -Abfragen nisten?Apr 18, 2025 am 11:32 AMJa, Sie können, und es ist nicht wirklich wichtig in welcher Reihenfolge. Ein CSS -Präprozessor ist nicht erforderlich. Es funktioniert in regulären CSS.
Schnellschluck -Cache -BustingApr 18, 2025 am 11:23 AMSie sollten auf jeden Fall weitausgestellte Cache-Header auf Ihren Vermögenswerten wie CSS und JavaScript (und Bilder und Schriftarten und was auch immer) festlegen. Das sagt dem Browser
Auf der Suche nach einem Stapel, der die Qualität und Komplexität von CSS überwachtApr 18, 2025 am 11:22 AMViele Entwickler schreiben darüber, wie sie eine CSS -Codebasis pflegen können, aber nicht viele von ihnen schreiben darüber, wie sie die Qualität dieser Codebasis messen. Sicher, wir haben
Datalist dient dazu, Werte vorzuschlagen, ohne Werte durchzusetzenApr 18, 2025 am 11:08 AMHaben Sie jemals ein Formular gehabt, das ein kurzes, willkürliches Stück Text akzeptieren musste? Wie ein Name oder was auch immer. Das ist genau das, wofür es ist. Es gibt viele
Frontkonferenz in ZürichApr 18, 2025 am 11:03 AMIch bin so aufgeregt, nach Zürich, der Schweiz, zur Frontkonferenz zu gehen (liebe diesen Namen und diese URL!). Ich war noch nie in der Schweiz, also bin ich aufgeregt
Erstellen einer serverlosen Full-Stack-Anwendung mit Cloudflare-MitarbeiternApr 18, 2025 am 10:58 AMEine meiner Lieblingsentwicklungen in der Softwareentwicklung war das Aufkommen von Serverless. Als Entwickler, der die Tendenz hat, sich in den Details festzuhalten
Erstellen dynamischer Routen in einer Nuxt -AnwendungApr 18, 2025 am 10:53 AMIn diesem Beitrag werden wir eine E -Commerce -Store -Demo verwenden, die ich für Netlify erstellt und bereitgestellt habe, um zu zeigen, wie wir dynamische Routen für eingehende Daten erstellen können. Es ist fair
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.
Dreamweaver CS6
Visuelle Webentwicklungstools
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),
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
