Élément CSS – Comment afficher uniquement les barres de défilement horizontales?

J’ai un conteneur div et j’ai défini son style comme suit:

div#tbl-container { width: 600px; overflow: auto; scrollbar-base-color:#ffeaff } 

Cela me donne automatiquement les barres de défilement horizontales et verticales une fois que je remplis ma table qui est contenue par ce div. Je veux juste que seules les barres de défilement horizontales apparaissent automatiquement. Je vais modifier la hauteur de la table par programmation.

Comment puis-je faire cela?

Vous ne devriez pas obtenir les barres de défilement horizontales et verticales à moins que vous rendiez le contenu assez grand pour les exiger.

Cependant, vous faites généralement dans IE en raison d’un bogue. Vérifiez dans les autres navigateurs (Firefox, etc.) pour savoir si c’est uniquement IE qui le fait.

IE6-7 (parmi d’autres navigateurs) prend en charge l’extension CSS3 proposée pour définir des barres de défilement indépendamment, que vous pouvez utiliser pour supprimer la barre de défilement verticale:

 overflow: auto; overflow-y: hidden; 

Vous devrez peut-être également append pour IE8:

 -ms-overflow-y: hidden; 

comme Microsoft menace de déplacer toutes les propriétés pré-CR-standard dans leur propre boîte ‘-ms’ dans IE8 Standards Mode. (Cela aurait été logique s’ils l’avaient toujours fait de cette façon, mais c’est plutôt un inconvénient pour tout le monde maintenant.)

D’un autre côté, il est tout à fait possible que IE8 ait corrigé le bug de toute façon.

Je devais aussi append white-space: nowrap; au style, sinon les éléments se retrouveraient dans la zone que nous supprimons la possibilité de faire défiler.

Pour montrer les deux:

 

Masquer l’axe X:

 

Masquer l’axe Y:

 

Cette solution est sans spécification de hauteur / largeur pour le père div . Elle réagira donc au redimensionnement de la fenêtre et la cause la plus utile des barres de défilement horizontales apparaîtra si nécessaire.

 .container{ padding:20px; border:dotted 1px; white-space:nowrap; overflow-x:auto; } .box{ width:100px; height:180px; background-color: red; margin:10px; display:inline-block } 

Jetez un oeil à DEMO

vous pouvez également le faire overflow: auto et donner une hauteur et une largeur fixes maximales de cette façon, lorsque le texte ou tout ce qui s’y trouve, il déborde pour afficher uniquement la barre de défilement requirejse

J’utilise les propriétés CSS: 1) ” overflow-x: auto “; 2) ” overflow-y: hidden “; 3) ” white-space: nowrap “;

N’oubliez pas de définir une largeur, à la fois pour le conteneur et les composants DIVS internes. La propriété “white-space: nowrap” permet à DIVS interne de ne pas tomber sur une autre ligne.

Considérant le code HTML suivant:

 

J’utilise le CSS suivant pour avoir un défilement horizontal uniquement:

 .container { height: 80px; width: 600px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } .inner-1,.inner-2,.inner-3 { height: 60px; max-width: 250px; display: inline-block; /* this should fix it */ } 

Fiddle: https://jsfiddle.net/qrjh93x8/ (ne fonctionne pas avec le code ci-dessus)

Utilisez le suivant

 
 .box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px; border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;} .box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;} .box-author-txt ul li{ list-style-type:none; width:140px; } 

CSS3 a la propriété overflow-x , mais je ne m’attendrais pas à un grand soutien pour cela. Dans CSS2, tout ce que vous pouvez faire est de définir une règle de scroll générale et de ne pas les gâcher avec vos widths et heights .

Nous devrions nous mettre à overflow: auto et masquer une barre de défilement que nous n’utilisons pas pour travailler sur le support du navigateur CSS3. Regardez ce débordement CSS; XME.im