Comment définir la barre de défilement div en CSS

Avec le développement des pages Web et des applications mobiles, les barres de défilement sont devenues une expérience utilisateur indispensable, et la série de paramètres de style de barre de défilement fournie par CSS3 nous permet de personnaliser le style de la barre de défilement de manière plus flexible. Aujourd'hui, nous allons explorer comment. utiliser CSS pour définir les barres de défilement div.

1. Paramètres de base

Nous définissons un div avec du contenu en HTML Lorsque le contenu dépasse la taille du div, nous devons utiliser la barre de défilement pour l'afficher. Voici une structure HTML de base :

<div class="wrapper">
  <div class="content">
    <p>这里是一些内容</p>
    <p>这里也是一些内容</p>
    <p>这里还是一些内容</p>
  </div>
</div>

Ensuite, définissons le style de base du div. Vous pouvez ajouter le style suivant :

.wrapper {
    width: 300px;
    height: 200px;
    overflow: auto; /* 滚动条设置 */
    margin: 20px;
    border: 1px solid #ccc;
    padding: 10px;
}

.content {
    width: 100%;
    height: auto;
}

En définissant l'attribut overflow: auto sur .wrapper, le contenu sera affiché lorsque le. la barre de défilement est masquée. Les barres de défilement apparaissent lorsque la taille dépasse la taille du div sans s'étendre vers l'extérieur et couvrir d'autres éléments.

2. Paramètres de base de la barre de défilement

Ensuite, nous pouvons personnaliser davantage le style de la barre de défilement des manières suivantes :

/* 滚动条整体样式 */
.wrapper::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #f5f5f5;
}

/* 滚动条thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb {
    width: 5px;
    height: 10px;
    background-color: #9a9a9a;
}

/* 滚动条hover状态下thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* 滚动条上下箭头样式 */
.wrapper::-webkit-scrollbar-button {
    background-color: #ccc;
    display: none;
}

/* 滚动条左右箭头样式 */
.wrapper::-webkit-scrollbar-button:start:decrement, .wrapper::-webkit-scrollbar-add-button {
    display: none;
}

.wrapper::-webkit-scrollbar-button:end:increment, .wrapper::-webkit-scrollbar-sub-button {
    display: none;
}

Analyse du code :

1. ::-webkit-scrollbar : Sélectionner tout composants de la barre de défilement. Ce style peut définir la largeur globale, la hauteur et la couleur d’arrière-plan de la barre de défilement. ::-webkit-scrollbar ：选择所有滚动条部件。该样式可以设置滚动条整体的宽度高度和背景色。
2. ::-webkit-scrollbar-thumb ：选择滑块。该样式可以控制滑块的宽度高度和背景色。
3. ::-webkit-scrollbar-thumb:hover ：选择滑块在hover状态下的样式。
4. ::-webkit-scrollbar-button ：选择滚动条两端的箭头部分。该样式用于控制上下左右箭头的背景色和是否显示。
5. ::-webkit-scrollbar-button:start:decrement 或者 ::-webkit-scrollbar-sub-button ：选择滚动条上箭头(向上滚动)/左箭头(向左滚动)部分，当滚动条是垂直/水平方向时使用。
6. ::-webkit-scrollbar-button:end:increment 或者 ::-webkit-scrollbar-add-button ：选择滚动条下箭头(向下滚动)/右箭头(向右滚动)部分，当滚动条是垂直/水平方向时使用。

三、自定义滚动条

我们可以根据需要，自定义滚动条的样式，下面是一个自定义样式的例子：

.wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #a0a0a0;
}

.wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.wrapper::-webkit-scrollbar-corner {
    background-color: #f5f5f5;
}

代码解析：

1. ::-webkit-scrollbar-track ：选择滚动条的 track 部分，是滑块和滚动箭头/滚动区域之间的区域，可以设置 track 的样式，如背景颜色、边框、圆角等，此例子中我们对其进行了圆角设置。
2. ::-webkit-scrollbar-thumb ：选择滑块的样式，此例子中我们对其进行了圆角设置，并设置了滑块的背景颜色以及hover状态下背景颜色。
3. ::-webkit-scrollbar-corner
::-webkit-scrollbar-thumb : Sélectionnez le curseur. Ce style peut contrôler la largeur, la hauteur et la couleur d’arrière-plan du curseur.

::-webkit-scrollbar-thumb:hover : Sélectionnez le style du curseur en état de survol.

::-webkit-scrollbar-button : Sélectionnez les parties fléchées aux deux extrémités de la barre de défilement. Ce style est utilisé pour contrôler la couleur d’arrière-plan et s’il faut afficher les flèches haut, bas, gauche et droite.

🎜::-webkit-scrollbar-button:start:decrement ou ::-webkit-scrollbar-sub-button : Sélectionnez la flèche sur la barre de défilement (faites défiler vers le haut )/ La partie flèche gauche (défilement vers la gauche) est utilisée lorsque la barre de défilement est verticale/horizontale. 🎜🎜::-webkit-scrollbar-button:end:increment ou ::-webkit-scrollbar-add-button : sélectionnez la flèche vers le bas de la barre de défilement (faites défiler vers le bas) Partie /flèche droite (défilement vers la droite), utilisée lorsque la barre de défilement est verticale/horizontale. 🎜🎜🎜3. Barre de défilement personnalisée 🎜🎜Nous pouvons personnaliser le style de la barre de défilement en fonction de nos besoins. Voici un exemple de style personnalisé : 🎜rrreee🎜Analyse du code : 🎜🎜🎜::-webkit. -scrollbar -track : Sélectionnez la partie piste de la barre de défilement, qui est la zone entre le curseur et la flèche de défilement/zone de défilement. Vous pouvez définir le style de piste, tel que la couleur d'arrière-plan, la bordure, les coins arrondis, etc. Dans cet exemple, nous avons défini des coins arrondis. 🎜🎜::-webkit-scrollbar-thumb : Sélectionnez le style du curseur. Dans cet exemple, nous définissons les coins arrondis, et définissons la couleur d'arrière-plan du curseur et la couleur d'arrière-plan au survol. État. . 🎜🎜::-webkit-scrollbar-corner : Définissez la couleur du coin de la barre de défilement. Habituellement, nous la définissons sur la même couleur que le conteneur. 🎜🎜🎜IV.Résumé🎜🎜Après avoir défini la barre de défilement ci-dessus, nous pouvons choisir le style correspondant à définir en fonction des besoins réels, afin de mieux vivre l'expérience interactive des pages Web et des applications mobiles. Dans le même temps, il convient de noter que les exemples ci-dessus s'appliquent principalement à certains navigateurs basés sur Webkit tels que Chrome et Safari. Si vous souhaitez vous adapter à d'autres navigateurs, vous devez utiliser des styles et des attributs différents. 🎜

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!