CSS définit le style de la barre de défilement-Questions et réponses frontales-php.cn

CSS définit le style de la barre de défilement

WBOY

Libérer： 2023-05-21 10:01:06

original

26674 Les gens l'ont consulté

CSS (Cascading Style Sheets) est l'une des technologies les plus fréquemment utilisées dans le développement front-end, qui permet d'obtenir des effets visuels de pages riches. Parmi eux, le style de barre de défilement personnalisé est également une exigence courante. Cet article explique comment utiliser CSS pour styliser les barres de défilement.

1. Styles de barre de défilement de base

CSS fournit quelques paramètres de style de barre de défilement de base. Nous pouvons ajouter les attributs suivants à la barre de défilement dans la feuille de style :

/* 垂直滚动条样式 */
/* 宽度 */
::-webkit-scrollbar {
    width: 12px;
}
/* 背景色 */
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}
/* 滑块颜色 */
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}

/* 水平滚动条样式 */
/* 高度 */
::-webkit-scrollbar {
    height: 12px;
}
/* 背景色 */
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}
/* 滑块颜色 */
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}

Copier après la connexion

::-webkit-scrollbar< /code. > : Définissez la largeur (ou la hauteur) de la barre de défilement. Pour les barres de défilement verticales, l'attribut width fonctionne ; pour les barres de défilement horizontales, l'attribut height fonctionne. </li><code>::-webkit-scrollbar：设置滚动条的宽（或高）度。对于垂直滚动条，width属性起作用；对于水平滚动条，height属性起作用。
::-webkit-scrollbar-track：设置滚动条的背景色。
::-webkit-scrollbar-thumb：设置滚动条滑块的颜色。

使用上述代码，我们可以给滚动条添加一个简单的灰色样式。但这种样式可能不足够突出，无法很好地融入页面风格，下面将介绍一些更加个性化的滚动条样式设置。

二、自定义滑块和背景色

要自定义滚动条的滑块和背景色，可以使用background属性对这两个部分进行定制。例如，我们可以使用渐变效果，将滑块的颜色从一个到另一个色值进行渲染。

/* 垂直滚动条样式 */
/* 宽度 */
::-webkit-scrollbar {
    width: 12px;
}
/* 背景 */
::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #a1a1a1, #6b6b6b);
}

/* 水平滚动条样式 */
/* 高度 */
::-webkit-scrollbar {
    height: 12px;
}
/* 背景 */
::-webkit-scrollbar-track {
    background: linear-gradient(to right, #f5f5f5, #e8e8e8);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #a1a1a1, #6b6b6b);
}

Copier après la connexion

这里使用了CSS的线性渐变。滑块和背景色之间的渐变效果可以让滚动条的样式更为柔和。

三、隐藏滚动条

在某些特定的情况下，可能需要让滚动条隐藏。这时，我们可以使用scrollbar-width和scrollbar-height两个属性，将滚动条宽度或高度设置为0来实现。但这种方式只能在一定程度上隐藏滚动条，因为在鼠标移动的时候，滚动条依然会自动出现并随鼠标移动而改变位置。

body {
    scrollbar-width: none; /* 隐藏垂直滚动条 */
    -ms-overflow-style: none; /* 隐藏IE/Edge浏览器的垂直滚动条 */
}

/* 设置最外层容器的高度 */
.scroll-container {
    height: 500px;
    overflow-y: scroll; /* 自动出现滚动条 */
}

Copier après la connexion

以上代码中，我们将scrollbar-width设置为none，从而隐藏垂直滚动条。同时，为了让滚动条自动出现，我们将overflow-y属性设置为scroll，这样当页面溢出容器时，滚动条就会自动出现。

需要注意的是，IE和Edge浏览器的滚动条样式设置需要使用-ms-overflow-style属性，多加注意。

四、自定义滚动条的圆角和阴影效果

最后，我们可以给滚动条添加一些更加生动的视觉效果，例如圆角和阴影。我们可以使用CSS的border-radius属性来控制圆角，使用box-shadow::-webkit-scrollbar-track : Définit la couleur d'arrière-plan de la barre de défilement.

::-webkit-scrollbar-thumb : Définit la couleur du curseur de la barre de défilement.

En utilisant le code ci-dessus, nous pouvons ajouter un simple style gris à la barre de défilement. Cependant, ce style n'est peut-être pas suffisamment visible pour bien s'intégrer dans le style de la page. Certains paramètres de style de barre de défilement plus personnalisés seront présentés ci-dessous.

2. Personnaliser le curseur et la couleur d'arrière-plan

🎜Pour personnaliser le curseur et la couleur d'arrière-plan de la barre de défilement, vous pouvez utiliser l'attribut background pour personnaliser ces deux parties. Par exemple, nous pouvons utiliser un effet de dégradé pour restituer la couleur du curseur d'une valeur de couleur à une autre. 🎜

/* 垂直滚动条样式 */
/* 宽度 */
::-webkit-scrollbar {
    width: 12px;
}
/* 背景 */
::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #f5f5f5, #e8e8e8);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #a1a1a1, #6b6b6b);
    border-radius: 5px; /* 圆角 */
    box-shadow: inset 0 0 6px rgba(0,0,0,.3); /* 阴影 */
}

/* 水平滚动条样式 */
/* 高度 */
::-webkit-scrollbar {
    height: 12px;
}
/* 背景 */
::-webkit-scrollbar-track {
    background: linear-gradient(to right, #f5f5f5, #e8e8e8);
}
/* 滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #a1a1a1, #6b6b6b);
    border-radius: 5px; /* 圆角 */
    box-shadow: inset 0 0 6px rgba(0,0,0,.3); /* 阴影 */
}

Copier après la connexion

🎜 Le dégradé linéaire CSS est utilisé ici. L'effet de dégradé entre le curseur et la couleur d'arrière-plan peut adoucir le style de la barre de défilement. 🎜🎜3. Masquer la barre de défilement🎜🎜Dans certains cas spécifiques, vous devrez peut-être masquer la barre de défilement. À ce stade, nous pouvons utiliser les deux propriétés scrollbar-width et scrollbar-height pour définir la largeur ou la hauteur de la barre de défilement sur 0. Cependant, cette méthode ne peut masquer la barre de défilement que dans une certaine mesure, car lorsque la souris bouge, la barre de défilement apparaît toujours automatiquement et change de position à mesure que la souris se déplace. 🎜rrreee🎜Dans le code ci-dessus, nous définissons scrollbar-width sur none pour masquer la barre de défilement verticale. En même temps, afin de faire apparaître automatiquement la barre de défilement, nous définissons l'attribut overflow-y pour qu'il soit scroll, de sorte que lorsque la page déborde du conteneur, la barre de défilement apparaisse automatiquement. 🎜🎜Il convient de noter que les paramètres de style de barre de défilement des navigateurs IE et Edge doivent utiliser l'attribut -ms-overflow-style, alors faites plus attention. 🎜🎜4. Personnalisez les coins arrondis et les effets d'ombre de la barre de défilement🎜🎜Enfin, nous pouvons ajouter des effets visuels plus vifs à la barre de défilement, tels que des coins arrondis et des ombres. Nous pouvons utiliser la propriété CSS border-radius pour contrôler les coins arrondis, et la propriété box-shadow pour ajouter un effet d'ombre. 🎜rrreee🎜Dans le code ci-dessus, nous ajoutons des coins arrondis et des effets d'ombre au curseur de la barre de défilement pour lui donner un aspect plus tridimensionnel. 🎜🎜En bref, grâce aux propriétés pertinentes du CSS, nous pouvons facilement personnaliser le style de la barre de défilement, rendant ainsi la page plus personnalisée et améliorant l'expérience utilisateur. Le code ci-dessus est uniquement à titre de référence, les lecteurs peuvent concevoir des styles de barre de défilement plus flexibles en fonction de leurs propres besoins. 🎜

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!