Maison > Article > interface Web > Comment masquer les barres de défilement en CSS
Comment masquer la barre de défilement : utilisez d'abord le sélecteur de pseudo-classe "::-webkit-scrollbar" pour sélectionner la barre de défilement de l'élément, puis utilisez le style "display:none;" la barre de défilement ; format de syntaxe spécifique "::-webkit-scrollbar{display:none;}".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Masquer les barres de défilement peut être défini à l'aide du sélecteur de pseudo-objet de la barre de défilement personnalisée ::-webkit-scrollbar.
Utilisez ce sélecteur de pseudo-classe pour masquer le code CSS de la barre de défilement :
.element::-webkit-scrollbar {display:none}
Si vous souhaitez être compatible avec d'autres navigateurs PC (IE, Firefox, etc.), vous pouvez utiliser le méthode suivante. Imbibez un autre calque à l'extérieur du conteneur avec overflow:hidden, puis limitez la taille du contenu interne à la même taille que la couche d'imbrication externe, afin qu'il soit masqué.
<div class="outer-container"> <div class="inner-container"> <div class="content"> ...... </div> </div> </div>
Code CSS :
.outer-container,.content { width: 200px; height: 200px; } .outer-container { position: relative; overflow: hidden; } .inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; } /* for Chrome */ .inner-container::-webkit-scrollbar { display: none; }
Apprentissage recommandé : 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!