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!