Comment supprimer la barre de défilement horizontale dans un div? - html, css, débordement, défilement horizontal

Quand je mis overflow:scroll, Je reçois des barres de défilement horizontales et verticales.

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

Réponses:

overflow-x: hidden;

Ne pas oublier d'écrire overflow-x:hidden;

le code devrait ê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 y-scrollbar ne soit visible que lorsque cela est nécessaire, je trouve que cela fonctionne:

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

CSS

overflow-y: scroll;

Voir sur jsFiddle.

Remarquez si vous supprimez le -y du overflow-y propriété, la barre de défilement horizontale est affichée.

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

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

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/

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

overflow: auto;

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

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>

J'avais des problèmes 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, il s'agit d'une solution parfaite, car aucun de mes contenus n'est censé être plus volumineux que prévu, ce qui a résolu le problème que j'avais.

overflow:auto;