Comment implémenter le style de barre de défilement personnalisé CSS3

Cet article présente principalement l'exemple de code du style de barre de défilement personnalisé CSS3. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Les barres de défilement sont une chose très courante, mais les barres de défilement fournies avec certains navigateurs ne sont vraiment pas très belles. Ce qui suit peut être utilisé comme une étude pour discuter de la mise en œuvre de barres de défilement personnalisées, de sorte que. vos barres de défilement, ça peut être beau. Cependant, je ne peux jouer que pour m'amuser, car c'est uniquement pour les navigateurs dotés du noyau webkit !

Introduction au débordement

Définition : L'attribut overflow spécifie s'il faut découper le contenu, afficher les barres de défilement ou afficher le contenu lorsqu'il déborde de son conteneur au niveau du bloc.

Valeur de l'attribut

overflow:visible    //默认值。内容不会被修剪，超出内容会显示在元素框之外
overflow:hidden     //内容会被修剪。超出内容被隐藏
overflow:scroll     //内容会被修剪，浏览器会显示滚动条以便查看其余内容
overflow:auto       //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:inherit     //规定从该父元素继承overflow属性的值

Remarque : toute version d'Internet Explorer (y compris IE8) n'est pas prise en charge. valeur "hériter".

Lorsque le débordement est défini sur une valeur autre que la valeur par défaut (visible), un contexte au niveau du bloc (un moyen d'effacer les flottants) sera créé. Pour plus d'informations, voir Compréhension approfondie de BFC et . Réduire la marge

Conseils

Vous pouvez utiliser les attributs suivants pour gérer la partie excédentaire de la ligne de texte actuelle. (En même temps, la valeur de largeur de l'élément doit être définie, ainsi que overflow:hidden; et white-space:nowrap; )

text-overflow:clip       //修剪文本。
text-overflow:ellipsis   //显示省略符号来代表被修剪的文本。
text-overflow:string     //使用给定的字符串来代表被修剪的文本。

Obligatoire pour le texte multiligne L'attribut non standard -webkit-line-clamp est utilisé, qui ne sera pas discuté en détail ici.

Barres de défilement horizontales et verticales

Utilisez overflow-x et overflow-y pour définir respectivement les barres de défilement horizontales et verticales.

Implémentation de la barre de défilement personnalisée

Cette partie est destinée aux navigateurs avec le noyau webkit. Elle utilise des pseudo-classes pour modifier le style par défaut de la barre de défilement. suit :

Le composant de la barre roulante

2. :: Peut monter et descendre (ou gauche ou droite)
3. ::-webkit-scrollbar-track             La piste de la barre de défilement (avec le pouce à l'intérieur)                                                                                   Les boutons aux extrémités de la piste de barre vous permettent d'affiner la position du petit carrés en cliquant dessus.
5. ::-webkit-scrollbar-track-piece La piste intérieure, la partie centrale de la barre de défilement
6 ::-webkit-scrollbar-corner Le coin, où se trouvent la barre de défilement verticale et horizontale. scroll bar intersect
7. ::-webkit-resizer Le petit contrôle utilisé pour faire glisser et ajuster la taille de l'élément à l'intersection des deux barres de défilement

Le diagramme de structure de la composition de la barre de défilement est comme suit :

Ce qui suit est un ensemble d'implémentations simples de barres de défilement personnalisées :

<p class="box box7">
    <p>这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。 这个属性定义溢出元素内容区的内容会如何处理。如果值为
        scroll，不论是否需要， 用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也 会出现滚动条。
    </p>
</p>


.box8::-webkit-scrollbar {
    width: 12px;
    background-color: #eee;
}

.box8::-webkit-scrollbar-track {
    background-color: #eee;
}

.box8::-webkit-scrollbar-thumb {
    background: #3DB6A4;
}

.box8::-webkit-scrollbar-button:start {
    background: url(./imgs/up.png) no-repeat;
    background-size: 12px 12px;
}

.box8::-webkit-scrollbar-button:end {
    background: url(./imgs/down.png) no-repeat;
    background-size: 12px 12px;
}

Plus d'effets sont présentés ci-dessous :

Notez que cela ne fonctionne que sous Chrome ! ! ! ! ! !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

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!