Comment masquer la barre de défilement en CSS3

La façon de masquer la barre de défilement en CSS3 est de personnaliser le sélecteur de pseudo-objet de la barre de défilement [::-webkit-scrollbar], tel que [.element::-webkit-scrollbar { width: 0 !important } 】.

L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.

Souvent, nous rencontrerons cette situation au travail, où nous devons masquer la barre de défilement et prendre en charge le défilement. Alors que devons-nous faire face à cette situation ? La première réaction de beaucoup de gens est peut-être d'utiliser le plug-in iscroll, mais je préfère utiliser le CSS pour réaliser cette fonction. Jetons un coup d'œil aux méthodes spécifiques ci-dessous.

Méthode 1 : Calculer la largeur de la barre de défilement et la masquer

Cachez simplement la barre de défilement en la positionnant.

<div class="outer-container">
    <div class="inner-container">
    	......
    </div>
</div>

rrree

Ce code déplace intelligemment 17 pixels vers la droite, ce qui est exactement égal à la largeur de la barre de défilement. Cette valeur a été obtenue par débogage manuel. Aucun problème trouvé dans Chrome et IE.

Méthode 2 : Entouré de trois conteneurs, pas besoin de calculer la largeur de la barre de défilement

Ce code a été vu pour la première fois sur le blog de Microsoft. Il est similaire à l'idée ci-dessus, sauf que. Une autre boîte a été ajoutée à la maison, limitant le contenu à la boîte. De cette façon, vous ne pouvez pas voir la barre de défilement et toujours pouvoir faire défiler. Le code est le suivant :

.outer-container{	
width: 360px;	
height: 200px;	
position: relative;	
overflow: hidden;
}.inner-container{	
position: absolute;	
left: 0;	
top: 0;	
right: -17px;	
bottom: 0;	
overflow-x: hidden;	
overflow-y: scroll;
}

rrree

Méthode 3 : barre de défilement cachée CSS

Sélecteur de pseudo-objet de barre de défilement personnalisée ::-webkit-scrollbar.

 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>

IE 10+

.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;
}

Firefox

.element::-webkit-scrollbar { width: 0 !important }

Partage de vidéos d'apprentissage gratuit : 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!