Anwendung zur Verarbeitung von HTML-Tag-Überläufen

Anwendung zur Verarbeitung von HTML-Tag-Überläufen

Verwenden Sie CSS, um Bildlaufleisten zu ändern
1. Überlaufeinstellungen bei Inhaltsüberlauf

overflow-x-Einstellung für horizontalen Inhaltsüberlauf
Overflow-Y-Einstellungen für vertikalen Inhaltsüberlauf. Die obigen drei Eigenschaften sind auf „Sichtbar“ (Standardwert), „Scrollen“, „Ausgeblendet“ und „Automatisch“ eingestellt.

2. scrollbar-3d-light-colorDie Farbe der hellen Kante der dreidimensionalen Bildlaufleiste
scrollbar-arrow-colorDie Farbe des dreieckigen Pfeils auf den Auf- und Ab-Buttons
scrollbar-base-color Die Grundfarbe der Scrollbar
scrollbar-dark-shadow-color Die Farbe des starken Schattens der dreidimensionalen Bildlaufleiste
scrollbar-face-color Die Farbe des hervorstehenden Teils der dreidimensionalen Bildlaufleiste
scrollbar-highlight-color Die Farbe des leeren Teils der Bildlaufleiste
scrollbar-shadow-color Die Farbe des dreidimensionalen Bildlaufleistenschattens. Die durch die oben genannten sieben Eigenschaften festgelegten Werte sind alle Farbwerte und können auf verschiedene im Stylesheet definierte Arten ausgedrückt werden.

Mithilfe des obigen Stildefinitionsinhalts können wir angeben, ob der Stil und die Farbe von Bildlaufleisten in Browserfenstern und mehrzeiligen Textfeldern angezeigt werden sollen. Die erste Gruppe von Stilattributen wird verwendet, um festzulegen, ob das festgelegte Objekt Bildlaufleisten anzeigt, und die zweite Gruppe von Stilattributen wird verwendet, um die Farbe der Bildlaufleiste festzulegen. Es ist zu beachten, dass die in diesem Artikel enthaltenen Stilattribute nur von IE unterstützt werden und die zweite Gruppe von Stilattributen nur von IE5.5. Achten Sie daher beim Debuggen darauf.

Wir erläutern die oben genannten Stilattribute anhand mehrerer Beispiele:

1. Stellen Sie sicher, dass das Browserfenster niemals Bildlaufleisten oder horizontale Bildlaufleisten enthält
<body style="overflow-x:hidden">
Keine vertikale Bildlaufleiste
<body style="overflow-y:hidden">
Keine Bildlaufleisten
<body style="overflow-x:hidden;overflow-y:hidden"> oder <body style="overflow:hidden">

2. Stellen Sie die Bildlaufleiste des mehrzeiligen Textfelds so ein, dass keine horizontale Bildlaufleiste vorhanden ist

Code kopieren
Der Code lautet wie folgt:
<textarea style="overflow-x:hidden"> </textarea>

Keine vertikale Bildlaufleiste

Code kopieren
Der Code lautet wie folgt:
<textarea style="overflow-y:hidden"> </textarea>

Keine Bildlaufleisten

Code kopieren
Der Code lautet wie folgt:
<textarea style="overflow-x:hidden;overflow-y:hidden"> </textarea>

oder
Code kopieren
Der Code lautet wie folgt:
<textarea style="overflow:hidden"> </textarea>


3. Stellen Sie die Farbe der Fenster-Bildlaufleiste ein Stellen Sie die Farbe der Fenster-Bildlaufleiste auf Rot ein <body style="scrollbar-base-color:red">
scrollbar-base-color legt die Grundfarbe fest. Im Allgemeinen müssen Sie nur diese eine Eigenschaft festlegen, um die Farbe der Bildlaufleiste zu ändern.
Fügen Sie einen kleinen Spezialeffekt hinzu:

Code kopieren
Der Code lautet wie folgt:
<body style="scrollbar-arrow-color:gelb;scrollbar-base-color:helllachs">


4. Beim Festlegen anderer Elemente ist es grundsätzlich dasselbe. Am besten definieren Sie eine Klasse in der Stylesheet-Datei, damit Sie sie wiederverwenden können.


Code kopieren
Der Code lautet wie folgt:

.coolscrollbar
{
Bildlaufleistenpfeilfarbe: gelb;
Grundfarbe der Bildlaufleiste: Helllachs;
}

Fügen Sie die obige Anweisung zur Stylesheet-Datei oder zum <style> </style> des HTML-Headers hinzu und verwenden Sie dann
<textarea class="coolscrollbar"> </textarea>

<<:  So installieren Sie Docker unter CentOS und veröffentlichen Docker remote in Springboot

>>:  Fähigkeiten zur Erstellung von Webformularen

Artikel empfehlen

Lösen Sie das Problem, dass auf VMware15 Centos7 Bridge-Modus SSH plötzlich nicht mehr zugegriffen werden kann

Da ich möchte, dass die virtuelle Maschine eine e...

So legen Sie den Fokus auf HTML-Elemente fest

Code kopieren Der Code lautet wie folgt: <Körp...

Erklären Sie den Unterschied zwischen Iframe und Frame in HTML anhand von Beispielen

Ich weiß nicht, ob Sie das Frameset-Attribut in I...

Detaillierte Erläuterung der Anwendungsszenarien von Filtern in Vue

filter werden im Allgemeinen verwendet, um bestim...

Erstellen von responsiven E-Mails mit Vue.js und MJML

MJML ist ein modernes E-Mail-Tool, mit dem Entwic...

Bringen Sie Ihnen bei, wie Sie wartbaren JS-Code schreiben

Inhaltsverzeichnis Was ist wartbarer Code? Code-K...

Lösung für das Problem der ungültigen Zeilenhöheneinstellung in CSS

Über die ungültige Zeilenhöheneinstellung in CSS ...

JavaScript zum Erreichen eines einfachen Message Board-Falls

Verwenden Sie Javascript, um ein Message Board-Be...

So lösen Sie das Problem der Randüberlappung

1. Zunächst müssen Sie wissen, was den vertikalen ...

So verwenden Sie die ES6-Klassenvererbung, um einen wunderschönen Balleffekt zu erzielen

Inhaltsverzeichnis einführen Implementierungsschr...

So installieren und konfigurieren Sie den Postfix-Mailserver unter CentOS 8

Postfix ist ein kostenloser und quelloffener MTA ...

Detaillierte Erklärung von JavaScript Promise und Async/Await

Inhaltsverzeichnis Überblick Vier Beispiele Beisp...

Fünf Dinge, die ein guter User Experience Designer gut machen sollte (Bild und Text)

Dieser Artikel wurde aus dem Blog „Usability Count...

Das Miniprogramm implementiert nativ das linksseitige Schubladenmenü

Inhaltsverzeichnis WXS-Antwortereignis Plan A Sei...

Lösung für den Vue3.0-Fehler: Modul „worker_threads“ kann nicht gefunden werden

Ich werde meinen ersten Versuch mit vue3.0 aufzei...