CSS overflow-x: visible; overflow-y: hidden; causant la barre de défilement problème
supposons que vous ayez un certain style et le markup:
css lang-css prettyprint-override">ul
{
white-space: nowrap;
overflow-x: visible;
overflow-y: hidden;
/* added width so it would work in the snippet */
width: 100px;
}
li
{
display: inline-block;
}
html lang-html prettyprint-override"><div>
<ul>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
<li>7</li> <li>8</li> <li>9</li>
</ul>
</div>
quand vous regardez ceci. Le <ul>
a une barre de défilement en bas même si j'ai spécifié des valeurs visibles et cachées pour le débordement x/Y.
(observé sur Chrome 11 et opera (?))
je suppose qu'il doit y avoir une spécification w3c ou quelque chose qui dit que cela va se produire mais pour la vie de moi Je ne peux pas travailler pourquoi.
JSFiddle
mise à jour: - j'ai trouvé un moyen d'obtenir le même résultat en ajoutant un autre élément enroulé autour du ul
. regardez ça.
6 réponses
après quelques recherches sérieuses, il semble que j'ai trouvé la réponse à ma question:
de: http://www.brunildo.org/test/Overflowxy2.html
In Gecko, Safari, Opera, ' visible’ devient "auto" aussi lorsqu'il est combiné avec ‘caché’ (en d'autres termes: ‘visible’ devient "auto", lorsqu'il est combiné avec autre chose différent de ‘visible.)’ Gecko 1.8, Safari 3, Opéra 9.5 sont assez cohérentes entre ils.
aussi le spec W3C dit:
les valeurs calculées de ' overflow-x’ et " overflow-y’ sont les mêmes que les leurs les valeurs spécifiées, sauf que certaines des combinaisons avec "visibles" ne sont pas possible: si on est spécifié comme ‘visible’ et l'autre est de défilement ou 'auto’, puis' visible’ est défini à ‘auto.’ La valeur reconstituée de ‘débordement’ est égale à la calculés la valeur de "débordement-x" si ‘débordement-y’ est le même, sinon c'est la paire des valeurs calculées de " overflow-x’ et 'overflow-y'.
Version Courte:
si vous utilisez visible
pour overflow-x
ou overflow-y
et quelque chose d'autre que visible
pour l'autre, la valeur visible
est interprétée comme auto
.
j'ai trouvé à l'origine un moyen CSS pour contourner cela en utilisant le plugin Cycle jQuery. Cycle utilise JavaScript pour mettre ma diapositive à overflow: hidden
, donc en mettant mes images à width: 100%
les images auraient l'air découpé verticalement, et donc je les ai forcés à être visible avec !important
et pour éviter de montrer l'animation de la diapositive de la boîte j'ai mis overflow: hidden
au div conteneur de la diapositive. Espérons que cela fonctionne pour vous.
mise à jour - nouvelle Solution:
problème Original - > http://jsfiddle.net/xMddf/1 /
(Même si j'utilise overflow-y: visible
, il devient "auto" et "arrêt".)
#content {
height: 100px;
width: 200px;
overflow-x: hidden;
overflow-y: visible;
}
la nouvelle solution - > http://jsfiddle.net/xMddf/2 /
(J'ai trouvé une solution de contournement en utilisant un wrapper div à appliquer overflow-x
et overflow-y
à différents DOM elements as James Khoury conseillé sur le problème de la combinaison de visible
et hidden
à un seul élément DOM.)
#wrapper {
height: 100px;
overflow-y: visible;
}
#content {
width: 200px;
overflow-x: hidden;
}
un autre hack, qui semble faire l'affaire:
style="padding-bottom: 250px; margin-bottom: -250px;"
sur l'élément où le débordement vertical est l'obtention de coupure, avec 250
représentant autant de pixels que vous avez besoin pour votre déroulante, etc.
j'ai rencontré ce problème en essayant de construire un fixe positionné latéral avec à la fois verticalement contenu contrôlable et emboîté absolute positioned children pour être affiché à l'extérieur des limites de la barre latérale .
mon approche consistait à appliquer séparément:
- an
overflow: visible
propriété de l'élément latéral - un "151930920 de la propriété" à la barre latérale intérieure wrapper
veuillez cocher l'exemple ci-dessous ou un codepen en ligne .
html {
min-height: 100%;
}
body {
min-height: 100%;
background: linear-gradient(to bottom, white, DarkGray 80%);
margin: 0;
padding: 0;
}
.sidebar {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 200px;
overflow: visible; /* Just apply overflow-x */
background-color: DarkOrange;
}
.sidebarWrapper {
padding: 10px;
overflow-y: auto; /* Just apply overflow-y */
height: 100%;
width: 100%;
}
.element {
position: absolute;
top: 0;
right: 100%;
background-color: CornflowerBlue;
padding: 10px;
width: 200px;
}
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<div class="sidebar">
<div class="sidebarWrapper">
<div class="element">
I'm a sidebar child element but I'm able to horizontally overflow its boundaries.
</div>
<p>This is a 200px width container with optional vertical scroll.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
j'ai utilisé l'approche content+wrapper
... mais j'ai fait quelque chose de différent de ce qui a été dit jusqu'à présent: je me suis assuré que les limites de mon emballage ne correspondent pas aux limites du contenu dans le sens où je voulais être visible .
NOTE IMPORTANTE: il a été assez facile d'obtenir l'approche content+wrapper, same-bounds
de travailler sur un navigateur ou un autre en fonction de diverses combinaisons css de position
, overflow-*
, etc... mais je n'ai jamais pu utiliser cette approche pour les obtenir tous correct (bord, Chrome, Safari, ...).
mais quand j'avais quelque chose comme:
<div id = "hack_wrapper" // created solely for this purpose
style = "position:absolute; width:100%; height:100%; overflow-x:hidden;">
<div id = "content_wrapper"
style = "position:absolute; width:100%; height:15%; overflow:visible;">
... content with too-much horizontal content ...
</div>
</div>
... tous les navigateurs étaient heureux.
il y a maintenant une nouvelle façon de traiter ce problème - si vous retirez la position: relative du conteneur qui a besoin d'avoir le débordement-y visible, vous pouvez avoir débordement-y visible et débordement-x caché, et vice versa (ont débordement-x visible et débordement-y caché, assurez-vous juste que le conteneur avec la propriété visible n'est pas relativement positionné).
voir ce post de CSS trucs pour plus de détails - il a fonctionné pour moi: https://css-tricks.com/popping-hidden-overflow /