Comment ajouter une barre de défilement en CSS

En CSS, vous pouvez utiliser l'attribut overflow pour définir la barre de défilement. Il vous suffit d'ajouter le style "overflow:scroll" à l'élément. Cette propriété définit la façon dont le contenu qui déborde de la zone de contenu de l'élément est géré. Si la valeur est scroll, l'agent utilisateur fournit un mécanisme de défilement, qu'il soit requis ou non.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

1. Nous pouvons utiliser l'attribut overflow pour définir si une barre de défilement apparaît.

Cet attribut définit comment le contenu qui déborde de la zone de contenu de l'élément sera traité. Si la valeur est scroll, l'agent utilisateur fournit un mécanisme de défilement, qu'il soit requis ou non. Par conséquent, il est possible que des barres de défilement apparaissent même si tout rentre dans la zone de l'élément.

overflow:scroll /* x y 方向都会*/
或者
overflow-x:scroll /*只是x方向*/
或者
overflow-y:scroll  /*只是y方向*/

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

masqué : masquez toujours les barres de défilement

scroll : affichez toujours les barres de défilement

lorsque le contenu est au niveau du bloc La zone dépasse la portée de l'élément de niveau bloc, elle sera affichée sous la forme d'une barre de défilement. Vous pouvez faire défiler le contenu à l'intérieur et le contenu à l'intérieur ne dépassera pas la zone de niveau bloc.

2. Utilisez l'attribut scrollbar pour définir le style de la barre de défilement

• ::-webkit-scrollbar La partie globale de la barre de défilement

• ::-webkit-scrollbar-button Les boutons aux deux extrémités du barre de défilement

• ::-webkit -scrollbar-track Piste extérieure

• ::-webkit-scrollbar-track-piece Piste intérieure, partie médiane de la barre de défilement (supprimée)

• ::-webkit -scrollbar-thumb L'intérieur de la barre de défilement peut être déplacé. Celui

• ::-webkit-scrollbar-corner corner

• ::-webkit-resizer définit le style du bloc de déplacement dans le coin inférieur droit

Exemple :

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width:16px;
    height:16px;
    background-color:#F5F5F5;
}
/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
    border-radius:10px;
    background-color:#F5F5F5;
}
/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    background-color:#555;
}

Apprentissage recommandé : Tutoriel vidéo CSS

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!