Comment Masquer les Barres de Défilement Avec CSS

Si vous ne savez pas comment masquer les barres de défilement pour les navigateurs principals avec seulement CSS, vous êtes à la bonne place!

Masquer les barres de défilement est bien. Quand tout le contenu est visible, l'utilisateur peut le passer.

Mais n'oubliez pas que le défilement horizontal rend le contenu difficile à lire, donc évitez de masquer le défilement horizontal sur le Web.

Vous pouvez utiliser un code CSS pour masquer les barres de défilement de n'importe quel élément.

Dans cet extrait, nous allons montrer comment supprimer la barre de défilement de l'élément <div> et de la balise <textarea>.

Voyons un exemple et essayons de discuter ensemble chaque partie du code.

1. Créez HTML.

  • Créez trois divs avec les classes "outer", "inner" et "element" dans le corps. Écrivez votre contenu que doit être défilé.
<body>
  <div class="outer">
    <div class="inner">
      <div class="element">
        Lorem Ipsum est simplement du faux texte …
      </div>
    </div>
  </div>
</body>

2. Ajoutez CSS.

  • Définissez la width et height des classes "element" et "outer".
  • Définissez position: absolute; et left: 0; de la classe "inner" sur l'élément de texte pour que la barre de défilement soit hors de la vue.
.element,
.outer {
  width: 300px;
  height: 300px;
}
.outer {
  border: 2px solid #666666;
  position: relative;
  overflow: hidden;
}
.inner {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.inner::-webkit-scrollbar {
  display: none;
}
.inner {
  -ms-overflow-style: none; // IE 10+
  overflow: -moz-scrollbars-none; // Firefox
}

Il y a quelques règles que vous devez maintenir dans votre code la barre de défilement.

  • La règle simple pour les navigateurs -Webkit-:
.element::-webkit-scrollbar { width: 0 !important }
  • Règle pour IE 10+:
.element {
  -ms-overflow-style: none;
}
  • Il y avait une règle pour Firefox mais elle est déjà obsolète:
.element {
  overflow: -moz-scrollbars-none;
}

Rassemblons les parties de code et voyons comment cela fonctionne!

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .element,
      .outer {
        width: 300px;
        height: 300px;
      }

      .outer {
        border: 2px solid #666666;
        position: relative;
        overflow: hidden;
      }
      .inner {
        position: absolute;
        left: 0;
        overflow-x: hidden;
        overflow-y: scroll;
      }
      .inner::-webkit-scrollbar {
        display: none;
      }
      .inner {
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">
        <div class="element">
          Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla
          ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été
          popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem
          Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des
          morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé
          dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
        </div>
      </div>
    </div>
  </body>
</html>

Une autre façon de masquer la barre de défilement se compose d'ajouter le code suivant dans notre code:

.element {
  overflow: hidden;
}

Maintenant voyons comment supprimer la barre de défilement de la balise <textarea>.

Un élément <textarea> est utilisé pour que les utilisateurs puissent saisir des textes, donner du feedback, laisser des commentaires. Par défaut, l'élément <textarea> vient avec une barre de défilement verticale. Cela aide à l'utilisateur à saisir et réviser leur texte en défilant vers le haut et vers le bas.

On a besoin de définir la propriété CSS overflow à "hidden" pour masquer la barre de défilement.

Ci-dessous, vous trouverez un exemple dans lequel la barre de défilement est masquée de l'élément <textarea>:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      textarea{
      overflow:hidden;
    </style>
  </head>
  <body>
    <form>
      <textarea rows="15" cols="30">
      Entrez votre contenu ... jusqu'à ce que vous vous attendiez à une barre de défilement verticale. 
      </textarea>
    </form>
  </body>
</html>