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

So implementieren Sie die automatische Ansible-Installation und -Konfiguration von httpd im Linux-System

1. Verwenden Sie das Playbook von Ansible, um htt...

Analyse der Verwendung der Funktion zur sofortigen Ausführung in JavaScript

Wir wissen, dass eine Funktion im Allgemeinen auf...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.18 winx64

Die Installation komprimierter Pakete hat sich se...

Erste Zusammenfassung des Website-Erstellungs-Tutorials für Anfänger

Nachdem ich diese sechs Artikel geschrieben hatte,...

Hintergrundbild-Cache unter IE6

Fehler beim Flackern des CSS-Hintergrundbilds in ...

Detaillierte Erklärung der Single-Choice- und Multiple-Choice-Auswahl im HTML-Select-Tag

Das Auswahlelement erstellt ein Einzelauswahl- ode...

Detaillierte Erläuterung der Leistungsüberwachung des MySQL-Servers mit Prometheus und Grafana

Überblick Prometheus ist ein Open-Source-Dienstüb...

getdata Tabelle Tabellendaten Join MySQL-Methode

öffentliche Funktion json_product_list($where, $o...

Detaillierte Erläuterung der JDBC-Datenbankverknüpfung und der zugehörigen Methodenkapselung

Detaillierte Erläuterung der JDBC-Datenbankverknü...

Mit JS in zehn Minuten die Existenz von Elementen in einem Array bestimmen

Vorwort In der Front-End-Entwicklung müssen Sie h...

Beispiel für ein WeChat-Applet zum Erzielen des rotierenden Laterneneffekts

Vorwort In der täglichen Entwicklung stoßen wir h...

Über Front-End JavaScript ES6 Details

Inhaltsverzeichnis 1. Einleitung 1.1 Babel-Transc...

MySQL 5.7-Bereitstellung und Remotezugriffskonfiguration unter Linux

Vorwort: Vor Kurzem werde ich mit meinen Partnern...

Unter Windows 10 Linux Ubuntu 18.04 als Dualsystem installieren (Installationsanleitung)

Ich habe ein Linux-Ubuntu-System auf meinem Compu...

Installieren Sie Ethereum/Ethereum von Grund auf unter CentOS7

Inhaltsverzeichnis Vorwort Fügen Sie Sudo-Schreib...