Comment masquer la barre de défilement en CSS

Version mobile

La page mobile doit uniquement être compatible avec Chrome et Safari, vous pouvez donc utiliser le sélecteur de pseudo-classe de la barre de défilement personnalisée ::- webkit-scrollbar pour masquer la barre de défilement.

.container::-webkit-scrollbar {
  display: none;
}

(Tutoriel recommandé : Tutoriel CSS)

Côté PC

Le côté PC a des exigences de compatibilité relativement plus élevées, donc tout peut D'une autre manière, le l'idée générale est d'envelopper un div de conteneur parent en dehors du div de contenu, de définir overflow: caché, de définir le div de contenu sur display-x: caché; la largeur du div de contenu. Ou définissez simplement la marge droite du div de contenu sur une valeur négative.

<div class="outer">
    <div class="content">
      <p>1111</p>
      <p>222</p>
      <p>333</p>
      <p>444</p>
    </div>
</div>
 .outer {
   width: 300px;
   height: 300px;
   overflow: hidden;
  
   .content {
     width: 330px;
     /*margin-right: -15px;*/
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
     background: red;
     padding-top: 100px;
  
     p:not(:first-child) {
       margin-top: 100px;
     }
   }
 }

Tutoriels vidéo associés recommandés : 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!