Quelles sont les astuces pour utiliser les barres de défilement en HTML ?

Cette fois, je vais vous apporter quelques conseils pour l'utilisation des barres de défilement en HTML et des précautions pour l'utilisation des barres de défilement en HTML. Voici des cas pratiques, jetons un oeil.

Je dirais qu'un phénomène courant est que lors de la suppression de quelque chose sur une page Web, la barre de défilement est souvent toujours à la position avant la suppression de la chose, au lieu de courir vers le haut de la page, ce qui est très inhumain. Alors, comment y parvenir ? En fait, la méthode est très simple, il suffit d'ajouter EnsureScrollPositionOnPostback = "true" à la partie supérieure du code source .aspx.
Le phénomène ci-dessus a été rencontré lors de l'apprentissage du système de diffusion de nouvelles de Brisket. Permettez-moi de partager avec vous quelques autres conseils sur l'utilisation des barres de défilement HTML
(1) Masquer les barres de défilement

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

(2)Comment faire apparaître les barres de défilement dans les cellules ou les calques

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

(3)Javascript modifie le style de la barre de défilement dans le cadre, par exemple en changeant la couleur, remplacez-le par effet plat, etc.

<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>

Instructions :
scrollbar-3dlight-color:color ; Définir ou récupérer la couleur de la bordure lumineuse de la barre de défilement
scrollbar-highlight-color:color ; ; Définir ou récupérer la couleur du bord brillant de l'interface 3D de la barre de défilement ;
scrollbar-face-color: color ; Définir ou récupérer la couleur de la surface 3D de la barre de défilement ;
scrollbar-arrow-color:set ; ou récupérer la direction de la barre de défilement La couleur de la flèche ; lorsque la barre de défilement apparaît mais n'est pas disponible, cette propriété n'est pas valide
scrollbar-shadow-color:color Définit ou récupère la couleur du bord sombre de la barre de défilement 3D ; interface;
scrollbar-darkshadow-color:color; Définir ou récupérer la couleur de la bordure sombre de la barre de défilement;
scrollbar-base-color:color; Les autres couleurs de l'interface seront automatiquement ajustées en conséquence.
scrollbar-track-color:color; Définit ou récupère la couleur de la zone de déplacement de la barre de défilement
Remarque :
color est le code couleur que vous souhaitez définir, qui peut être hexadécimal, tel que #FF0000, OK Il est exprimé en RVB, comme rgb(255,0,255) ; lors de la définition du style de la barre de défilement, il n'est pas nécessaire d'utiliser tous les attributs pour que cela prenne effet.
(4) Positionnement des éléments de la page en JavaScript
clientX, clientY sont la position actuelle de la souris par rapport à la page Web. Lorsque la souris est située dans le coin supérieur gauche de la page, clientX=0, clientY. =0;
offsetX, offsetY sont la souris La position actuelle par rapport à une certaine zone de la page Web. Lorsque la souris est située dans le coin supérieur gauche de cette zone de la page, offsetX=0, offsetY=0;
screenX, screenY sont les positions de la souris par rapport à tout l'écran de l'utilisateur ;
x, y sont la position actuelle de la souris par rapport au navigateur actuel
scrollLeft : définit ou obtient la distance entre la gauche bord de l'objet et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre (en raison de la génération de la barre de défilement, la page en cours On voit que le contenu est incertain).
scrollTop : Définit ou obtient la distance entre le haut de l'objet et le haut du contenu visible dans la fenêtre.
gauche : Abscisse de l'objet par rapport à la page.
haut : coordonnée Y de l'objet par rapport à la page
(5) Sélection du bouclier, clic droit, etc.
oncontextmenu=self.event.returnValue=falseonselectstart= "return false"> ;
Le petit exemple suivant consiste à définir automatiquement la barre de défilement en fonction de la taille du formulaire

<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>

L'utilisation de barres de défilement est très courante, et là Il y a beaucoup de connaissances connexes. J'espère pouvoir continuer à apprendre et à résumer, afin que ma capacité d'apprentissage et mon efficacité d'apprentissage puissent être améliorées dans une certaine mesure

Je pense que vous maîtrisez les méthodes après avoir lu. ces cas. Veuillez faire attention à php pour des choses plus intéressantes. D'autres articles connexes sur le site Web chinois !

Lecture connexe :

Comment implémenter la zone de texte de saisie et le code de vérification img

Comment implémenter le survol de la souris dans html Prompt A tag content

Comment utiliser la méthode de déclenchement pour faire apparaître la boîte de dialogue de sélection de fichier sans cliquer sur l'entrée du type de fichier

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!