Welche Tipps gibt es für die Verwendung von Bildlaufleisten in HTML?

Dieses Mal gebe ich Ihnen einige Tipps für die Verwendung von Bildlaufleisten in HTML und Vorsichtsmaßnahmen für die Verwendung von Bildlaufleisten in HTML. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Ich würde sagen, ein häufiges Phänomen ist, dass beim Löschen von etwas auf einer Webseite die Bildlaufleiste oft immer noch an der Position vor dem Löschen des Objekts steht und nicht bis zum Anfang der Seite läuft, was sehr unmenschlich ist. Wie wird dies dann erreicht? Tatsächlich ist die Methode sehr einfach. Sie müssen nur MaintainScrollPositionOnPostback = „true“ zum oberen Teil des .aspx-Quellcodes hinzufügen.
Das obige Phänomen trat beim Erlernen des Brisket News Release Systems auf. Lassen Sie mich einige weitere Tipps zur Verwendung von HTML-Bildlaufleisten geben.
(1) Bildlaufleisten ausblenden

<bodystyle="
overflow-x
:hidden;overflow-y:hidden">

(2)So werden Bildlaufleisten in Zellen oder Ebenen angezeigt

<divstyle="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>

(3)Javascript ändert den Stil der Bildlaufleiste im Rahmen, z. B. durch Ändern der Farbe, Ändern in Flacheffekt usw.

<STYLE> 
BODY {SCROLLBAR-FACE-COLOR: #ffcc99; 
SCROLLBAR-HIGHLIGHT-COLOR: #ff0000; 
SCROLLBAR-SHADOW-COLOR: #ffffff; 
SCROLLBAR-3DLIGHT-COLOR: #000000; 
SCROLLBAR-ARROW-COLOR: #ff0000; 
SCROLLBAR-TRACK-COLOR: #dee0ed; 
SCROLLBAR-DARKSHADOW-COLOR: #ffff00;} 
</STYLE>

Anweisungen:
scrollbar-3dlight-color:color; Stellen Sie die helle Rahmenfarbe der Bildlaufleiste ein oder rufen Sie sie ab; ; Legen Sie die helle Kantenfarbe der 3D-Oberfläche der Bildlaufleiste fest oder rufen Sie sie ab.
scrollbar-arrow-color:color; oder die Richtung der Bildlaufleiste abrufen. Wenn die Bildlaufleiste angezeigt wird, aber nicht verfügbar ist, ist diese Eigenschaft ungültig.
scrollbar-shadow-color:color Legt die dunkle Kantenfarbe der 3D-Bildlaufleiste fest Schnittstelle;
scrollbar-darkshadow-color:color; Die dunkle Randfarbe der Scrollbar festlegen oder abrufen; Andere Schnittstellenfarben werden automatisch entsprechend angepasst.
scrollbar-track-color:color; Farbe des Ziehbereichs der Bildlaufleiste festlegen oder abrufen
Hinweis:
color ist der Farbcode, den Sie festlegen möchten. Dieser kann hexadezimal sein, z. B. #FF0000. OK Es wird in RGB ausgedrückt, z. B. rgb(255,0,255); beim Festlegen des Bildlaufleistenstils ist es nicht erforderlich, alle Attribute zu verwenden, damit es wirksam wird.
(4) Positionierung von Seitenelementen in JavaScript
clientX, clientY ist die aktuelle Position der Maus relativ zur Webseite. Wenn sich die Maus in der oberen linken Ecke der Seite befindet, gilt clientX=0, clientY =0;
offsetX, offsetY sind die aktuelle Position 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, offsetY=0;
screenX, screenY sind die Positionen der Maus relativ zum gesamten Bildschirm des Benutzers;
x, y sind die aktuelle Position der Maus relativ zum aktuellen Browser
scrollLeft: Legen Sie den Abstand zwischen links fest oder rufen Sie ihn ab Der Rand des Objekts und das äußerste linke Ende des aktuell sichtbaren Inhalts im Fenster (aufgrund der Generierung der Bildlaufleiste ist auf der aktuellen Seite ersichtlich, dass der Inhalt unsicher ist).
scrollTop: Legt den Abstand zwischen der Oberkante des Objekts und der Oberkante des sichtbaren Inhalts im Fenster fest oder ruft ihn ab.
links: X-Koordinate des Objekts relativ zur Seite.
oben: Y-Koordinate des Objekts relativ zur Seite
(5) Schildauswahl, Rechtsklick usw.
oncontextmenu
=self.event.returnValue=falseonselectstart= "return false"> ;
Das folgende kleine Beispiel ist die automatische Einstellung der Bildlaufleiste entsprechend der Größe des Formulars

Die Verwendung von Bildlaufleisten ist sehr verbreitet und dort Ich hoffe, dass ich weiterhin lernen und zusammenfassen kann, damit meine Lernfähigkeit und Lerneffizienz bis zu einem gewissen Grad verbessert werden kann.

<SPAN style="FONT-SIZE: 18px"><html> 
<head> 
<style type="text/css"> 
  .TopDIV 
  {  
     position:absolute; 
     left:130px; 
     top:10px; 
     width:105; 
     height:30; 
     overflow-x:hidden; 
     overflow-y:auto; 
     float: right; 
     border-style.:solid; 
     border-width:; 
     border-color:red 
  } 
  .LeftDIV 
  {  
     position:absolute; 
     left:10px; 
     top:40px; 
     width:120; 
     height:60; 
     overflow-x:hidden; 
     overflow-y:hidden; 
     float: right; 
     border-style.:solid; 
     border-width:; 
     border-color:yellow 
  } 
  .MainDIV 
  {  
     position:absolute; 
     left:130px; 
     top:40px; 
     width:120;; 
     height:80; 
     overflow-x:auto; 
     overflow-y:auto; 
     float: right; 
     border-style.:solid; 
     border-width:; 
     border-color:blue 
  } 
</style> 
<script type="text/javascript" language="javascript"> 
function setStyle() 
{ 
//145的由来LeftDiv的left+width+15（15是滚动条的宽度） 
document.getElementById("a").style.width=document.body.clientWidth - 145; 
//130的由来LeftDiv的left+width 
document.getElementById("c").style.width=document.body.clientWidth - 130; 
//55的由来TopDIV的top+height+15（15是滚动条的宽度） 
document.getElementById("b").style.height=document.body.clientHeight - 55; 
//40的由来TopDIV的top+height 
document.getElementById("c").style.height=document.body.clientHeight - 40; 
} 
</script> 
  
</head> 
<body onresize="setStyle();" onLoad="setStyle();"> 
  
<div id=&#39;a&#39; class="TopDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
  
<div id=&#39;b&#39; class="LeftDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
<div id=&#39;c&#39; onscroll="document.getElementById(&#39;b&#39;).scrollTop = this.scrollTop;document.getElementById(&#39;a&#39;).scrollLeft = this.scrollLeft;" 
 class="MainDIV"> 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
</div> 
</body> 
</html>

Ich glaube, dass Sie die Methoden nach dem Lesen beherrschen Weitere spannende Artikel finden Sie auf der chinesischen Website.

Verwandte Lektüre:

So implementieren Sie das Eingabetextfeld und den IMG-Bestätigungscode

So implementieren Sie den Mauszeiger HTML-Eingabeaufforderung A-Tag-Inhalt

So verwenden Sie die Trigger-Methode, um das Dateiauswahldialogfeld zu öffnen, ohne auf die Dateitypeingabe zu klicken

Das obige ist der detaillierte Inhalt vonWelche Tipps gibt es für die Verwendung von Bildlaufleisten in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!