Quelles sont les méthodes pour dépasser la barre de défilement d'affichage en CSS

Méthodes CSS au-delà de l'affichage des barres de défilement : 1. Calculer la largeur de la barre de défilement et la masquer ; 2. Entourer la de trois conteneurs, sans calculer la largeur de la barre de défilement ; 3. Personnaliser le pseudo-objet ; du sélecteur de barre de défilement [::webkit-scrollbar].

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

Css dépasse la méthode d'affichage de la barre de défilement :

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

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

Commentaire : Ce code intelligemment, il s'est déplacé de 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

Cette méthode ajoute une case supplémentaire par rapport à la méthode 1, limitant le contenu à la case, de sorte que Vous pouvez faire défiler même si vous ne voyez pas 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 3 : 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.

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

.element { -ms-overflow-style: none; }
　　Firefox

.element { overflow: -moz-scrollbars-none; }

Recommandations de tutoriel 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!