css définir le défilement

CSS est une partie importante du développement Web. Il contrôle le réglage des styles de page, et l'effet de défilement est également un élément indispensable des compétences CSS. Dans cet article, nous expliquerons comment définir le défilement en CSS pour rendre l'affichage de la page Web plus riche et dynamique.

1. Qu'est-ce que le défilement ? Barre de défilement horizontale pour afficher le contenu au-delà de la plage visible.

Normalement, la barre de défilement verticale apparaît sur le côté droit de la page, et la barre de défilement horizontale apparaît en bas de la page. De plus, les barres de défilement n'apparaissent pas toujours et n'apparaissent pas lorsque le contenu ne dépasse pas la zone visible.

2. Comment définir le défilement

CSS fournit des propriétés de configuration liées à la barre de défilement, et nous pouvons définir le style et le fonctionnement de la barre de défilement. Voici quelques-unes des propriétés de configuration de barre de défilement les plus courantes en CSS.

overflow

1. L'attribut overflow contrôle le comportement du contenu de l'élément lorsqu'il dépasse la plage visible de l'élément parent. Ses valeurs d'attribut sont :

(1) visible : La partie "overflow" sera rendue en dehors de la boîte de l'élément.

(2) masqué : Masquer le contenu "débordant".

(3) scroll : le contenu "Overflow" affiche des barres de défilement.

(4) auto : Détermine automatiquement si les barres de défilement doivent être affichées.

Exemple de code :

div{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll;
}
p{
    width: 400px;
    height: 200px;
    background-color: blue;
}

Dans le code ci-dessus, la hauteur de l'élément DIV est définie sur 100 px, la largeur est définie sur 200 px et la hauteur de l'élément P est défini sur 200 px et la largeur est définie sur 400 px. À ce stade, étant donné que la taille de l'élément P dépasse la plage visible de l'élément DIV, une barre de défilement apparaîtra dans la partie de débordement.

scrollbar-width

2. Cet attribut peut contrôler la largeur de la barre de défilement, et sa valeur peut être définie sur Thin : Thin, Auto : automatique (changera en fonction des paramètres du navigateur) ou aucun : n'affiche pas les barres de défilement.

Exemple de code :

div{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll;
    scrollbar-width: thin;
}
p{
    width: 400px;
    height: 200px;
    background-color: blue;
}

Dans le code ci-dessus, la largeur de la barre de défilement est définie sur fine et la barre de défilement est présentée dans un style fin.

scrollbar-color

3. Cet attribut est utilisé pour contrôler la couleur du curseur de la barre de défilement et du rail coulissant. Les valeurs disponibles sont. valeur de couleurs automatique ou personnalisée. La valeur de couleur personnalisée est écrite sous forme de deux valeurs de couleur, séparées par un espace pour représenter une couleur unidirectionnelle et séparées par une virgule pour représenter une couleur bidirectionnelle.

Exemple de code :

div{
    width: 200px;
    height: 100px;
    border: 1px solid red;
    overflow: scroll;
    scrollbar-width: thin;
    scrollbar-color: blue transparent;
}
p{
    width: 400px;
    height: 200px;
    background-color: blue;
}

Dans le code ci-dessus, définissez la couleur du curseur de la barre de défilement sur bleu et la couleur de la glissière sur transparent.

Résumé

Cet article enseigne plusieurs méthodes de configuration des barres de défilement en CSS En plus de ces attributs couramment utilisés, il existe de nombreuses autres méthodes de configuration, et il existe également des caractéristiques respectives. et des scénarios d'application. J'espère que cela pourra aider les lecteurs à comprendre les connaissances pertinentes et les méthodes pratiques des effets de défilement, à améliorer leurs compétences CSS et à découvrir et mettre en pratique de nouvelles possibilités.

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!