Comment masquer la barre de défilement dans div CSS

Comment masquer la barre de défilement en div css : 1. Calculez la largeur de la barre de défilement et masquez-la 2. Entourez-la de trois conteneurs, sans calculer la largeur de la barre de défilement ; pseudo barre de défilement Sélecteur d'objet "::-webkit-scrollbar".

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

3 façons d'implémenter CSS pour masquer les barres de défilement et faire défiler le contenu

Masquer les barres de défilement et devons également prendre en charge le défilement Nous rencontrons souvent cela dans le développement front-end. dans ce cas, la chose la plus simple à penser est d'ajouter un plug-in iscroll, mais maintenant CSS peut également réaliser cette fonction. Je l'ai utilisé dans de nombreux endroits. Jetons un coup d'œil à ces trois méthodes.

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

Dans la barre latérale de ce site, vous pouvez voir que le contenu du rapport quotidien front-end n'a pas de défilement barre, mais déplacer la souris vers le haut peut faire défiler le contenu. De quelle technologie s’agit-il ? En fait, je cache simplement la barre de défilement via le positionnement. Démonstration Vous trouverez ci-dessous une version simplifiée du code

<div class="outer-container">
    <div class="inner-container">
    ......
    </div>
</div>
.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;
}

Démonstration 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 continuer à faire défiler. Le code est le suivant :

 <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 3 : Masquer les barres de défilement avec CSS

En même temps, l'article partageait également une méthode pour masquer les barres de défilement via CSS, mais cette méthode n'est pas compatible avec IE et peut être utilisé sur les appareils mobiles. Il s'agit du sélecteur de pseudo-objet de la barre de défilement personnalisée ::-webkit-scrollbar Pour plus de détails, veuillez consulter l'article précédent : Style de barre de défilement du kit Web personnalisé CSS3 Chrome et Safari

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

Connaissances HTML/CSS plus détaillées. , veuillez visiter la colonne 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!