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)?


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

@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.


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>

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.



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


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)

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.