Réponses:
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;}
overflow-y: scroll;
Notez que si vous supprimez le -y
de la overflow-y
propriété, la barre de défilement horizontale s'affiche.
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.
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.
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;