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


128

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?

Réponses:


208
overflow-x: hidden;


Merci d'avoir économisé beaucoup de temps. Quelqu'un peut-il marquer cela comme une réponse acceptée plz.
Nagarajan SR

5
c'est une mauvaise solution. Parce que dans ce cas, vous masquez simplement le défilement horizontal dans le conteneur. Mais si ce conteneur est trop large, votre contenu ne rentrera pas dans votre conteneur.
Alex Filatov

38

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

Le code doit être:

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

21

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

19

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.


13

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

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

10

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

OP nécessite un défilement sans barre de défilement
T04435

8

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

8

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

html, body {
    overflow-x: hidden;
}

5

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


2

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>




-3

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;
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.