Tipps zur Verwendung von Bildlaufleisten in HTML

Als wir heute das Pressemitteilungssystem von Niu Nan kennenlernten, sprach Lehrer Niu Nan über einige Kenntnisse zu Bildlaufleisten. Es wurde nicht viel erwähnt und nur ein Teil des Wissens über Bildlaufleisten wurde behandelt. Wenn Sie sich eingehend damit befassen möchten, reicht dies nicht aus. Sie müssen sich selbst einige relevante Kenntnisse aneignen. Ich werde Ihnen ein Phänomen erklären, das jeder kennen muss. Wenn Sie auf einer Webseite etwas löschen, befindet sich die Bildlaufleiste häufig noch an der Position vor dem Löschen, anstatt auf sehr unmenschliche Weise an den Anfang der Seite zu laufen. Wie wird dies also erreicht? Tatsächlich ist die Methode sehr einfach. Sie müssen nur MaintainScrollPositionOnPostback = "true" zum oberen Teil des ASPX-Quellcodes hinzufügen. Siehe Abbildung unten:

Das oben beschriebene Phänomen ist mir begegnet, als ich das Nachrichtenveröffentlichungssystem von Niu Nan erlernte. Hier werde ich Ihnen einige weitere Tipps zur Verwendung von HTML-Bildlaufleisten geben.
(1) Bildlaufleiste ausblenden
<bodystyle="Überlauf-x:versteckt;Überlauf-y:versteckt">
(2) So lassen Sie eine Bildlaufleiste in einer Zelle oder Ebene erscheinen
<divstyle="Breite:200px;Höhe:200px;Überlauf-x:auto;Überlauf-y:auto;"></div>
(3) JavaScript ändert den Stil der Bildlaufleiste im Rahmen, beispielsweise durch Ändern der Farbe, Ändern in einen flachen Effekt usw.
<STIL>
KÖRPER {SCROLLBAR-FACE-COLOR: #ffcc99;
Scrollbalken-Highlight-Farbe: #ff0000;
SCROLLBAR-SCHATTENFARBE: #ffffff;
SCROLLBAR-3DLIGHT-FARBE: #000000;
Scrollbalken-Pfeil-Farbe: #ff0000;
Scrollbar-Track-Farbe: #dee0ed;
SCROLLBAR-DARKSHADOW-FARBE: #ffff00;}
</STIL>
veranschaulichen:
scrollbar-3dlight-color:color; Festlegen oder Abrufen der Farbe des hellen Rahmens der Bildlaufleiste;
scrollbar-highlight-color:color; Helle Randfarbe der Bildlaufleisten-3D-Schnittstelle festlegen oder abrufen;
scrollbar-face-color:Farbe; Legt die Farbe der 3D-Oberfläche der Bildlaufleiste fest oder ruft sie ab;
scrollbar-arrow-color:Farbe; Farbe des Richtungspfeils der Bildlaufleiste festlegen oder abrufen; wenn die Bildlaufleiste angezeigt wird, aber nicht verfügbar ist, ist diese Eigenschaft ungültig;
scrollbar-shadow-color:Farbe; Legen Sie die dunkle Randfarbe der 3D-Bildlaufleistenschnittstelle fest oder rufen Sie sie ab.
scrollbar-darkshadow-color:Farbe; Festlegen oder Abrufen der dunklen Rahmenfarbe der Bildlaufleiste;
scrollbar-base-color:Farbe; Legt die Grundfarbe der Bildlaufleiste fest oder ruft sie ab. Andere Farben der Benutzeroberfläche werden automatisch entsprechend angepasst.
scrollbar-track-color:color; Farbe des Ziehbereichs der Bildlaufleiste festlegen oder abrufen
Bemerkung:
Farbe ist der Farbcode, den Sie festlegen möchten. Er kann hexadezimal sein, z. B. #FF0000, oder in RGB, z. B. rgb(255,0,255). Beim Festlegen des Bildlaufleistenstils müssen Sie nicht alle Attribute verwenden, damit dies wirksam wird.
(4) Positionierung der Seitenelemente in Javascript
clientX und clientY geben die aktuelle Position der Maus relativ zur Webseite an. Wenn sich die Maus in der oberen linken Ecke der Seite befindet, ist clientX=0, clientY=0.
offsetX und offsetY sind die aktuelle Position der Maus relativ zu einem bestimmten Bereich auf der Webseite. Wenn sich die Maus in der oberen linken Ecke dieses Bereichs auf der Seite befindet, ist offsetX=0 und offsetY=0.
screenX und screenY sind die Positionen der Maus relativ zum gesamten Bildschirm des Benutzers;
x, y ist die aktuelle Position der Maus relativ zum aktuellen Browser
scrollLeft: Legt den Abstand zwischen der linken Grenze des Objekts und dem äußersten linken Ende des aktuell sichtbaren Inhalts im Fenster fest oder ruft ihn ab (aufgrund der Generierung der Bildlaufleiste ist der aktuell sichtbare Inhalt der Seite unsicher).
scrollTop: Legt den Abstand zwischen der Oberseite des Objekts und der Oberseite des sichtbaren Inhalts im Fenster fest oder ruft ihn ab.
links: Die X-Koordinate des Objekts relativ zur Seite.
oben: Die Y-Koordinate des Objekts relativ zur Seite
(5) Schildauswahl, Rechtsklick usw.
<body oncontextmenu=self.event.returnValue=falseonselectstart="return false">
Das folgende kleine Beispiel soll die automatische Einstellung der Bildlaufleiste entsprechend der Größe des Formulars realisieren

Code kopieren

Der Code lautet wie folgt:

<SPAN style="FONT-SIZE: 18px"><html>
<Kopf>
<style type="text/css">
  .TopDIV
  { 
     Position: absolut;
     links: 130px;
     oben: 10px;
     Breite: 105;
     Höhe: 30;
     Überlauf-x: versteckt;
     Überlauf-y:auto;
     float: rechts;
     Rahmenstil: durchgezogen;
     Rahmenbreite:;
     Rahmenfarbe: rot
  }
.LinkesDIV
  { 
     Position: absolut;
     links: 10px;
     oben: 40px;
     Breite: 120;
     Höhe: 60;
     Überlauf-x: versteckt;
     Überlauf-y: versteckt;
     float: rechts;
     Rahmenstil: durchgezogen;
     Rahmenbreite:;
     Rahmenfarbe: gelb
  }
.MainDIV
  { 
     Position: absolut;
     links: 130px;
     oben: 40px;
     Breite: 120;;
     Höhe: 80;
     Überlauf-x:auto;
     Überlauf-y:auto;
     float: rechts;
     Rahmenstil: durchgezogen;
     Rahmenbreite:;
     Rahmenfarbe: blau
  }
</Stil>
<script Typ="text/javascript" Sprache="javascript">
Funktion setStyle()
{
//Der Ursprung von 145 ist LeftDivs links+Breite+15 (15 ist die Breite der Bildlaufleiste)
document.getElementById("a").style.width=document.body.clientWidth - 145;
//Der Ursprung von 130 ist LeftDivs left+width
document.getElementById("c").style.width=document.body.clientWidth - 130;
//Der Ursprung von 55 ist die Oberseite+Höhe+15 von TopDIV (15 ist die Breite der Bildlaufleiste)
document.getElementById("b").style.height=document.body.clientHeight - 55;
//Der Ursprung von 40 ist die Spitze+Höhe von TopDIV
document.getElementById("c").style.height=document.body.clientHeight - 40;
}
</Skript>
 
</Kopf>
<body onresize="setStyle();" onLoad="setStyle();">
 
<div id='a' Klasse="TopDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
 
<div id='b' Klasse="LinksDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
<div id='c' onscroll="document.getElementById('b').scrollTop = dieses.scrollTop;document.getElementById('a').scrollLeft = dieses.scrollLeft;"
 Klasse="MainDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
</body>
</html>
</SPAN>

Die Verwendung von Bildlaufleisten ist weit verbreitet und es gibt viel Wissen darüber. Ich hoffe, dass ich weiter lernen und zusammenfassen kann, damit meine Lernfähigkeit und -effizienz bis zu einem gewissen Grad verbessert werden kann.

<<: Detaillierte Erklärung der berechneten Eigenschaften von Vue

>>: CSS3-Lösung für das Problem des Einfrierens auf Mobilgeräten (Optimierung der Animationsleistung)

Detaillierte Erklärung zum Festlegen des Kontextpfads in der Webanwendung

Lösung für das Problem, dass die Div-Breite auf width:100% eingestellt ist und dann die Polsterung oder der Rand das übergeordnete Element überschreitet

Artikel

Vue erzielt einen nahtlosen Karusselleffekt (Laufschrift)

Artikel

Gründe und Lösungen für die Aufforderung zum Speichern der Aktion nach dem Hochladen von Dateien im Formular

Artikel

Tipps zur Verwendung von Bildlaufleisten in HTML

Detaillierte Erklärung zum Festlegen des Kontextpfads in der Webanwendung

Tutorial zur HTML-Tabellenauszeichnung (5): Farbattribut für helle Rahmen BORDERCOLORLIGHT

MySQL-Operationen: Operationen mit JSON-Datentyp

Parsen von Apache Avro-Daten in einem Artikel

Lösen Sie das Problem verstümmelter chinesischer Schriftzeichen in Mysql5.7

Vue verwendet Drag & Drop, um einen Strukturbaum zu erstellen

MySQL fragt den aktuellsten Datensatz der SQL-Anweisung ab (Optimierung)

Lösung für das Problem, dass die Div-Breite auf width:100% eingestellt ist und dann die Polsterung oder der Rand das übergeordnete Element überschreitet

Vue erzielt einen nahtlosen Karusselleffekt (Laufschrift)

Gründe und Lösungen für die Aufforderung zum Speichern der Aktion nach dem Hochladen von Dateien im Formular

Artikel empfehlen

5 Möglichkeiten zum Löschen oder Entfernen großer Dateiinhalte in Linux

Tutorial zum Deaktivieren und Aktivieren von Triggern in MySQL [Empfohlen]

Natives JS-objektorientiertes Tippspiel

So ändern Sie die Quellenliste von Ubuntu 18.04 zum Alibaba- oder Tsinghua-Spiegel

So erhöhen Sie die Ladegeschwindigkeit von HTML-Seiten

WeChat-Applet zur Bestimmung, ob die Mobiltelefonnummer legal ist Beispielcode

MySQL-Lernhinweise: Daten-Engine

So lösen Sie das Problem, dass das Projekt in Eclipse nicht zu Tomcat hinzugefügt werden kann

Verwenden von CSS zum Implementieren einer Ladeanimation des Android-Systems

Detaillierte Erläuterung des Verwendungsprinzips und der Berechnungsmethode des Befehls umask unter Linux

Docker Swarm von der Bereitstellung bis zum grundlegenden Betrieb

Vue Element Front-End-Anwendungsentwicklung: Verwendung der API Store View in Vuex

Drei Möglichkeiten zur Implementierung des Wasserfall-Flow-Layouts

Linux CentOS 6.5: Anleitung zum Deinstallieren, Tarieren und Installieren von MySQL

MySQL-Interviewfragen: So richten Sie Hash-Indizes ein