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)

Das Vue-Projekt realisiert Anmelde- und Registrierungseffekte

Tipps zur Verwendung von Bildlaufleisten in HTML

Das Vue-Projekt realisiert Anmelde- und Registrierungseffekte

Detailliertes Grafik- und Text-Tutorial zum Herunterladen, Installieren und Konfigurieren von mysql-5.7.28 unter Windows

Beispiel für das Schreiben von mobilem H5 zum Aufrufen einer APP (IOS, Android)

Detailliertes Tutorial zur Installation und Bereitstellung von Nginx Linux

CSS Zurück zum Anfang Codebeispiel

js konvertiert ein mehrdimensionales Array in ein eindimensionales Array und ordnet es dann neu

So verwenden Sie JSX zum Implementieren von Karussellkomponenten (Front-End-Komponentenbildung)

HTML Tutorial: Sammlung häufig verwendeter HTML-Tags (4)

Verstehen Sie die anfängliche Verwendung von Redux in React in einem Artikel

Lösung für das Problem, dass das Vue-Seitenbild nicht angezeigt wird

Artikel empfehlen

Installations- und Konfigurationstutorial von MySQL 8.0.16 unter Win10

Verwenden von nginx + fastcgi zum Implementieren eines Bilderkennungsservers

Vue+Swiper realisiert Timeline-Effekt

Detaillierte Erläuterung der Verarbeitung der drei Docker Nginx-Protokolle

So kapseln Sie Axios einfach in Vue

Einführung in die Unterschiede zwischen HTML-Name, ID, Klasse (Format/Anwendungsszenario/Funktionen) usw.

Verwendung von Linux-Netzwerkkonfigurationstools

So implementieren Sie Nginx Reverse Proxy und Load Balancing (basierend auf Linux)

CSS3 realisiert verschiedene grafische Effekte kleiner Pfeile

Nginx erstellt Implementierungscode für RTMP-Liveserver

HTML-Tabelle_Powernode Java Academy

So zentrieren Sie den gesamten Seiteninhalt, sodass sich die Höhe an den Inhalt anpasst und automatisch erweitert

Sehr praktisches Tutorial zur umfassenden Zusammenfassung der MySQL-Funktionen und detaillierten Beispielanalysen

Aufbau einer Docker+K8S-Clusterumgebung und verteilte Anwendungsbereitstellung

So verwenden Sie Docker+DockerCompose zum Kapseln von Webanwendungen