Comment afficher la barre de défilement au-delà de CSS

Comment afficher les barres de défilement au-delà du CSS : 1. Entourez-les de trois conteneurs, sans calculer la largeur de la barre de défilement ; 2. Sélecteur de pseudo-objet pour barre de défilement personnalisée [::webkit-scrollbar].

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Le CSS dépasse la méthode d'affichage des barres de défilement :

Méthode 1 : Entourée de trois conteneurs, il n'y a pas besoin de calculer la largeur de la barre de défilement

Par rapport à la méthode 1, cette méthode ajoute une boîte supplémentaire et limite le contenu à l'intérieur de la boîte, afin que vous puissiez faire défiler sans voir la barre de défilement.

 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>
.element, .outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
  display: none;
}

Méthode 2 : Personnaliser le sélecteur de pseudo-objet de la barre de défilement ::webkit-scrollbar

Cette méthode n'est pas compatible avec IE et peut être utilisée pour les applications mobiles.

1
.element::-webkit-scrollbar { width: 0 !important }
　　IE 10+
1
.element { -ms-overflow-style: none; }
　　Firefox
1
.element { overflow: -moz-scrollbars-none; }

Détails :

Ce qui suit est le style de barre de défilement personnalisé du webkit

En utilisant la dernière version du navigateur Google Chrome, le style de barre de défilement est déjà très beau. Cette barre de défilement Webkit ne fonctionne qu'avec le noyau Webkit.

Propriétés du webkit

::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }

Recommandations de didacticiel associées : 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!