Désactiver la barre de défilement verticale en cas de dépassement de capacité div: auto

113

Est-il possible d'autoriser uniquement une barre de défilement horizontale lors de l'utilisation de débordement: auto (ou défilement)?

html css scroll scrollbar Joedborg
la source
Notez margin-bottomqu'avec une valeur négative va jouer avec overflow-y: hiddenetc.
Andrew

Réponses:

232

Ces deux propriétés CSS peuvent être utilisées pour masquer les barres de défilement:

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal
Luke
la source
@Coulton Et le safari et le chrome?
QMaster
Selon cela, cela fonctionne dans Safari et je sais que cela fonctionne dans Chrome.
Luc
3
Il convient de mentionner que vous pouvez toujours faire défiler le div en utilisant tab, à condition qu'il y ait des liens ou des éléments d'entrée dans le débordement caché
William Brochmann
40

Vous ne devez utiliser que

overflow-y:hidden; - Utilisez ceci pour masquer le défilement vertical

overflow-x:auto; - Utilisez ceci pour afficher le défilement horizontal

Luke a mentionné que les deux étaient cachés. donc je l'ai donné séparément.

Siva Charan
la source
21

débordement: automatique;
overflow-y: caché;

Pour IE8: -ms-overflow-y: hidden;

Ou sinon :

Pour masquer X :

<div style="height:150x; width:450px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"></div>

Pour masquer Y :

<div style="height:150px; width:450px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"></div>
Type au hasard
la source
8

Si vous voulez accomplir la même chose dans Gecko (NS6 +, Mozilla, etc.) et IE4 + simultanément, je pense que cela devrait faire l'affaire: V

body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: auto;
}

Cela sera appliqué à la balise body entière, veuillez la mettre à jour avec votre css pertinent et appliquer ces propriétés.

Nirav Mehta
la source
2

Ajoutez ce qui suit:

body{
overflow-y:hidden;
}
Zeinab
la source
1

Ces règles sont compatibles avec tous les navigateurs:

body {overflow: hidden; }
body::-webkit-scrollbar { width: 0 !important; }
body { overflow: -moz-scrollbars-none; }
body { -ms-overflow-style: none; }
tamueka
la source
1

Que diriez-vous d'une notation abrégée?

{overflow: auto hidden;}
Chong Lip Phang
la source
0

si vous souhaitez désactiver la barre de défilement, mais toujours capable de faire défiler le contenu de la DIV interne, utilisez le code ci-dessous en css,

.divHideScroll::-webkit-scrollbar {
    width: 0 !important
}
.divHideScroll {
    overflow: -moz-scrollbars-none;
}
.divHideScroll {
    -ms-overflow-style: none;
}

divHideScroll est le nom de classe du div cible.

Il fonctionnera dans tous les principaux navigateurs (Chrome, Safari, Mozilla, Opera et IE)

Tahir Alvi
la source