Comment supprimer la barre de défilement horizontale dans un div?

Lorsque je règle overflow: scroll, j'obtiens des barres de défilement horizontales et verticales.

Existe-t-il un moyen de supprimer la barre de défilement horizontale dans un div?

overflow-x: hidden;

N'oubliez pas d'écrire overflow-x: hidden;

Le code doit être:

overflow-y: scroll;
overflow-x: hidden;

Avec overflow-y: scroll, la barre de défilement verticale sera toujours là même si elle n'est pas nécessaire. Si vous voulez que la barre de défilement y soit visible uniquement lorsque cela est nécessaire, j'ai trouvé que cela fonctionne:

.mydivclass {overflow-x: hidden; overflow-y: auto;}

CSS

overflow-y: scroll;

Voyez-le sur jsFiddle .

Notez que si vous supprimez le -yde la overflow-ypropriété, la barre de défilement horizontale s'affiche.

Ajoutez ce code à votre CSS. Cela désactivera la barre de défilement horizontale.

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Pas de défilement (sans spécifier x ou y):

.your-class {
   overflow: hidden;
}

Supprimer le défilement horizontal:

.your-class {
   overflow-x: hidden;
}

Supprimer le défilement vertical:

.your-class {
   overflow-y: hidden;
}

Pour masquer la barre de défilement horizontale, nous pouvons simplement sélectionner la barre de défilement du div requis et la définir sur display: none;

Une chose à noter est que cela ne fonctionnera que pour les navigateurs basés sur WebKit (comme Chrome) car aucune option de ce type n'est disponible pour Mozilla.

Pour sélectionner la barre de défilement, utilisez ::-webkit-scrollbar

Donc, le code final sera comme ceci:

div::-webkit-scrollbar {
  display: none;
}

Pour supprimer la barre de défilement horizontale, utilisez le code suivant. Cela fonctionne à 100%.

html, body {
    overflow-x: hidden;
}

Si vous n'avez rien qui déborde horizontalement, vous pouvez également simplement utiliser

overflow: auto;

et il n'affichera que les barres de défilement en cas de besoin.

Voir la propriété CSS Overflow

Utilisation:

overflow: auto;

Cela affichera la barre de défilement verticale et seulement s'il y a un débordement vertical, sinon, il sera masqué.

Si vous avez à la fois un débordement x et y, les barres de défilement x et y seront affichées.

Pour masquer la barre de défilement x (horizontale), même si elle est présente, ajoutez simplement:

overflow-x: hidden;

body {
    font-family: sans-serif;
}

.nowrap {
    white-space: nowrap;
}

.container {
    height: 200px;
    width: 300px;
    padding 10px;
    border: 1px solid #444;

    overflow: auto;
    overflow-x: hidden;
}

<div class="container">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li class="nowrap">Item 8 and some really long text to make it overflow horizontally.</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
</ul>
</div>

Pour masquer le scrollbar, mais gardez le comportement.

div::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

Il y a des limites à cela.

• https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Utilisez ce morceau de code.

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

J'avais eu des problèmes là où j'utilisais

overflow: none;

Mais je savais que CSS ne l'aimait pas vraiment et que cela ne fonctionnait pas à 100% comme je le voulais.

Cependant, c'est une solution parfaite car aucun de mes contenus n'est censé être plus volumineux que prévu et cela a résolu le problème que j'avais.

overflow: auto;