Comment définir la barre de défilement en CSS ? Exemples détaillés de la façon de définir les barres de défilement CSS

Dans la conception des pages Web, la conception des barres de défilement est très nécessaire, de sorte que lorsque le texte ou l'image dépasse la taille du conteneur, le style de la barre de défilement apparaît. Alors, comment définir la barre de défilement en CSS ? Ensuite, laissez-moi vous expliquer comment définir la barre de défilement CSS.

Tout d'abord, examinons les propriétés qui peuvent être nécessaires pour définir la barre de défilement en CSS.

1. overflow-y : Définissez comment gérer le contenu lorsque le contenu de l'objet dépasse sa hauteur spécifiée ; overflow-x : Définissez comment gérer le contenu lorsque le contenu de l'objet ; l'objet dépasse sa largeur spécifiée

Paramètres :

visible : agrandissez la zone pour afficher tout le contenu
auto : ajoutez des barres de défilement uniquement lorsque le contenu dépasse la valeur limite
caché : toujours masquer la barre de défilement
défilement : Toujours afficher la barre de défilement

2. hauteur : Définissez la hauteur de la barre de défilement (modifiez simplement la valeur suivante).

3. Paramètre de couleur de la barre de défilement :

scrollbar-3d-light-color définit ou récupère la couleur de la bordure lumineuse de la barre de défilement
scrollbar-highlight-color définit ou récupère la barre de défilement. Interface 3D La couleur du bord lumineux (ThreedHighlight)
scrollbar-face-color Définit ou récupère la couleur de la barre de défilement Surface 3D (ThreedFace)
scrollbar-arrow-color Définit ou récupère la couleur de la barre de défilement flèche de direction
scrollbar-shadow -color Définir ou récupérer la couleur du bord sombre (ThreedShadow) de l'interface 3D de la barre de défilement
scrollbar-dark-shadow-color Définir ou récupérer la couleur de la bordure sombre de la barre de défilement (ThreedDarkShadow)
scrollbar-base-color Définir ou récupérer la couleur de base de la barre de défilement

Ensuite, regardons CSS pour définir le style de la barre de défilement.

Dans la page html nous pouvons définir la barre de défilement de toute la page comme ceci.

*{
scrollbar-3dlight-color:#D4D0C8; 
   scrollbar-highlight-color:#fff; 
   scrollbar-face-color:#E4E4E4; 
   scrollbar-arrow-color:#666; 
   scrollbar-shadow-color:#808080; 
   scrollbar-darkshadow-color:#D7DCE0; 
   scrollbar-base-color:#D7DCE0; 
   scrollbar-track-color:#;
}

Enfin, voyons comment masquer la barre de défilement après l'avoir définie en CSS (horizontalement, verticalement)

Beaucoup de gens disent pour utiliser overflow- y:hiddencss peut masquer la barre de défilement, mais il ne peut cibler que les éléments div et ne peut pas masquer le navigateur, et certaines informations indiquent Ajoutez scroll="no" à pour masquer la barre de défilement ; ajoutez style="overflow-x:hidden" à pour masquer la barre de défilement horizontale ; pour masquer la barre de défilement verticale.

1. Masquer complètement : ajoutez scroll="no" pour masquer la barre de défilement

2. Masquer lorsque vous n'en avez pas besoin : fait référence au moment où la largeur ou la hauteur de la fenêtre du navigateur est plus grande que la page. Lorsque la largeur ou la hauteur est élevée, la barre de défilement n'est pas affichée ; sinon, la barre de défilement est affichée

3. Méthode de feuille de style :

Ajouter style="overflow-x:hidden ; " pour masquer la barre de défilement horizontale ;

Ajoutez un style="overflow-y:hidden" pour masquer la barre de défilement verticale.

Méthode de masquage finale :

Ajouter

<style>html {
 overflow-x:hidden; //隐藏水平滚动条
 overflow-y:hidden;//隐藏垂直滚动条
 }
 </style>

à la page Recommandations associées :

la tête de div fixe CSS ne Défilement de la barre de défilement

barre de défilement de couche CSS_Échange d'expérience

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!