web-dev-qa-db-fra.com

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

Lorsque je définis overflow:scroll, les barres de défilement horizontales et verticales sont affichées. 

Est-il possible de supprimer la barre de défilement horizontale dans un div?

htmlcssoverflowhorizontal-scrolling
92
Ravi
overflow-x: hidden;

152
basarat

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

le code devrait être

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

27
DevelopmentBucket

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, je trouve que cela fonctionne:

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

CSS

overflow-y: scroll;

Voir sur jsFiddle .

Si vous supprimez le -y de la propriété overflow-y, la barre de défilement horizontale s’affiche.

14
alex

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

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

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

Si vous n’avez rien qui déborde horizontalement, vous pouvez aussi utiliser 

overflow:auto;

et il ne montrera que des barres de défilement en cas de besoin.

http://css-tricks.com/the-css-overflow-property/

4
rspilhaus
overflow: auto;

Cela montrera la barre de défilement verticale et seulement si il y a un débordement vertical, sinon, il sera caché. 

Si vous avez à la fois un dépassement 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>

1
aero

Pour masquer la barre de défilement horizontale, il suffit de sélectionner la barre de défilement de la div souhaitée et de la définir sur display: none;

Une chose à noter est que cela ne fonctionnera que pour les navigateurs Webkit (comme Chrome), car aucune option de ce type n'est disponible pour Mozilla.

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

Donc, le code final sera comme ça:

div::-webkit-scrollbar{
  display: none;
}
0
Shubham Jain

Pour supprimer la barre de défilement horizontale, utilisez ce code. ça marche à 100%

html, body {overflow-x: hidden;}
0
Harshit Bansal