Comment résoudre les problèmes de style de barre de défilement

Je pense que de nombreux collègues ont été confus par les styles de barre de défilement des différents navigateurs, et les styles de barre de défilement par défaut des différents navigateurs ne sont pas cohérents. Il existe de nombreuses opinions sur Internet concernant la modification du style de la barre de défilement, mais la plupart d'entre elles sont superficielles. Aujourd'hui, je ne parlerai que d'informations pratiques, d'informations pratiques pures. Les informations pratiques proviennent de la recommandation d'un de mes collègues. Ici, je voudrais remercier mon collègue, merci.

Étape 1 : Vous devez insérer le code suivant dans la balise style

/* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 5px;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }

Étape 2 : Ajouter des styles au conteneur

overflow:auto; (ou overflow-y:auto; ou overflow-x:auto;)

L'effet ne sera pas publié, vous pourrez donc assister au moment miraculeux en personne ! Si ça ne marche pas, n'hésitez pas à lâcher une brique~

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!