html définir la barre de défilement

Barre de défilement des paramètres HTML

Dans une page Web, s'il y a trop de contenu textuel, la page peut ne pas être visible clairement ou la mise en page peut prêter à confusion. À l’heure actuelle, nous devons utiliser des barres de défilement pour aider les utilisateurs à visualiser tout le contenu de la page. En HTML, nous pouvons implémenter la fonction de barre de défilement en définissant des attributs.

Parmi eux, les deux attributs les plus couramment utilisés sont overflow et overflow-x / overflow-y.

1. attribut overflow

Cet attribut détermine s'il faut afficher les barres de défilement lorsque le contenu dépasse le conteneur. Il a trois valeurs​​qui peuvent être utilisées :

• visible : la valeur par défaut, ce qui signifie que la barre de défilement ne sera pas affichée, mais que le contenu débordera d'une partie du conteneur.
• masqué : indique que le contenu débordant ne sera pas affiché et que les barres de défilement ne seront pas affichées.
• auto : Indique que la barre de défilement ne sera affichée que lorsque le contenu déborde du conteneur, sinon elle ne sera pas affichée.

Par exemple :

<div style="width: 200px; height: 100px; overflow: auto;">
  这里是一段很长的内容...
</div>

Dans ce code, la largeur de l'élément div est de 200 px et la hauteur est de 100 px. Lorsque le contenu dépasse cette plage, des barres de défilement seront automatiquement affichées.

2. Attributs overflow-x et overflow-y

En plus de définir la barre de défilement globale, nous pouvons également définir respectivement les barres de défilement horizontale et verticale. Les attributs spécifiques sont overflow-x et overflow-y.

Comme le montre l'exemple de code suivant :

<div style="width: 150px; height: 150px; overflow-x: scroll; overflow-y: hidden;">
 这里是一些很宽的内容...
</div>

Dans ce code, deux attributs sont utilisés. Lorsque le contenu est trop large, seules les barres de défilement horizontales apparaissent ; aucune barre de défilement verticale n'apparaît. Cela garantit que la page dispose de plus d'espace pour afficher d'autres contenus.

De plus, il existe un attribut couramment utilisé : le style de débordement. Il peut être utilisé pour définir le style de la barre de défilement, tel que borderWidth, couleur, style, etc. Par exemple, utilisez le code suivant pour changer la couleur de la barre de défilement en bleu et définir la largeur sur 10 pixels :

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f2f2f2;
}
::-webkit-scrollbar-thumb {
  background-color: #2196F3;
}

Pour résumer, configurer les barres de défilement en HTML est très simple. En définissant les propriétés overflow et overflow-x / overflow-y, nous pouvons facilement implémenter la mise en page et l'affichage du contenu des pages Web. Enfin, vous pouvez rendre les barres de défilement plus cohérentes avec votre style de marque et de codage en utilisant le style de débordement.

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!