html - overflow-x not working
CSS overflow-x: visible; y desbordamiento-y: oculto; causando problemas en la barra de desplazamiento (6)
Supongamos que tienes un poco de estilo y el marcado:
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;
}
<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>
Cuando ves esto. <ul> tiene una barra de desplazamiento en la parte inferior a pesar de que he especificado valores visibles y ocultos para el desbordamiento x / y.
(observado en Chrome 11 y opera (?))
Supongo que debe haber alguna especificación de w3c o algo que diga que esto suceda, pero por mi vida no puedo entender por qué.
ACTUALIZACIÓN: - Encontré una manera de lograr el mismo resultado al agregar otro elemento envuelto alrededor de la ul . Echale un vistazo.
Después de una búsqueda seria, parece que he encontrado la respuesta a mi pregunta:
de: http://www.brunildo.org/test/Overflowxy2.html
En Gecko, Safari, Opera, ''visible'' se convierte en ''auto'' también cuando se combina con ''oculto'' (en otras palabras: ''visible'' se convierte en ''auto'' cuando se combina con cualquier otra cosa diferente de ''visible''). Gecko 1.8, Safari 3, Opera 9.5 son bastante consistentes entre ellos.
también la especificación W3C dice:
Los valores calculados de ''overflow-x'' y ''overflow-y'' son los mismos que sus valores especificados, excepto que algunas combinaciones con ''visible'' no son posibles: si una se especifica como ''visible'' y la otra es ''scroll'' o ''auto'', entonces ''visible'' se establece en ''auto''. El valor calculado de ''overflow'' es igual al valor calculado de ''overflow-x'' si ''overflow-y'' es el mismo; de lo contrario, es el par de valores calculados de ''overflow-x'' y ''overflow-y''.
Version corta:
Si está utilizando visible para overflow-x o overflow-y y algo que no sea visible para el otro, el valor visible se interpreta como auto .
Me he topado con este problema al intentar crear una barra lateral de posición fija con contenido verticalmente desplazable y niños en posición absoluta anidados para que se muestren fuera de los límites de la barra lateral .
Mi enfoque consistió en aplicar por separado:
- un
overflow: visiblepropiedadoverflow: visibleal elemento de la barra lateral - una propiedad de
overflow-y: autoa la barra lateral envoltura interna
Por favor, consulte el siguiente ejemplo o un codepen en línea
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>
Originalmente encontré una forma CSS de omitir esto al usar el complemento Cycle jQuery. Cycle usa JavaScript para hacer que la diapositiva se overflow: hidden , por lo que al configurar mis imágenes al width: 100% las imágenes se verían cortadas verticalmente, por lo que las forcé a ser visibles con !important y para evitar mostrar la animación de diapositivas fuera del cuadro configuro overflow: hidden al contenedor div de la diapositiva. Espero que funcione para ti.
ACTUALIZACIÓN - Nueva solución:
Problema original -> http://jsfiddle.net/xMddf/1/ (Incluso si uso overflow-y: visible se convierte en "automático" y en realidad "desplaza".)
#content {
height: 100px;
width: 200px;
overflow-x: hidden;
overflow-y: visible;
}
La nueva solución -> http://jsfiddle.net/xMddf/2/ (Encontré una solución alternativa utilizando un div envoltorio para aplicar overflow-x y overflow-y a diferentes elementos de DOM como aconsejó sobre el problema de combinar visible y hidden a un solo elemento DOM)
#wrapper {
height: 100px;
overflow-y: visible;
}
#content {
width: 200px;
overflow-x: hidden;
}
Otro truco barato, que parece hacer el truco:
style="padding-bottom: 250px; margin-bottom: -250px;" en el elemento donde se está cortando el desbordamiento vertical, con 250 representando tantos píxeles como sea necesario para su menú desplegable, etc.
Utilicé el enfoque de content+wrapper ... pero hice algo diferente a lo que se mencionó hasta ahora: me aseguré de que los límites de mi envoltorio NO se alinearan con los límites del contenido en la dirección en la que quería ser visible .
NOTA IMPORTANTE: fue lo suficientemente fácil para obtener el enfoque de content+wrapper, same-bounds para trabajar en un navegador u otro, dependiendo de varias combinaciones de position css, overflow-* , etc ... pero nunca pude usar ese enfoque para obtener Todos ellos correctos (Edge, Chrome, Safari, ...).
Pero cuando tuve algo como:
<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>
... todos los navegadores estaban felices.
Ahora hay una nueva forma de abordar este problema : si elimina la posición: relativo del contenedor que necesita tener visible el desbordamiento -y, puede tener el desbordamiento-y visible y desbordado-x, y viceversa (tener desbordamiento- x visible y desbordado-y oculto, solo asegúrese de que el contenedor con la propiedad visible no esté relativamente posicionado).
Vea esta publicación de CSS Tricks para obtener más detalles; funcionó para mí: https://css-tricks.com/popping-hidden-overflow/