overflow-y

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Sumario

La propiedad  overflow-y define si se debe de cortar el contenido, mostrar una barra scroll, o mostrar el contenido desbordado  de un elemento cuando se desborda de arriba y abajo.

Valor inicialvisible
Applies tonon-replaced block-level elements and non-replaced inline-block elements
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animatableno
Canonical orderel orden único no-ambigüo definido por la gramática formal

Sintaxis

/* El contenido no es recortado */
overflow-y: visible;

/* El contenido es recortado sin mostrar barra scroll */
overflow-y: hidden;

/* El contenido es recordado, mostrando barra scroll */
overflow-y: scroll;

/* Deja al navegador decidir */
overflow-y: auto;

overflow-y: inherit;

Valores

visible
El contenido no es recortado.
hidden
El contenido es recortado sin mostrar barra scroll.
scroll
El contenido es recortado y los navegadores de computadoras utilizan barras scroll, ya sea que existe contenido desbordado o no. Esto con el objetivo de evitar problemas con barras apareciendo y desapareciendo en un entorno dinámico. Las impresoras pueden imprimir el contenido desbordado.
auto
Depende del navegador. Navegadores como Firefox para escritorio proveen barras scroll cuando el contenido se desborda.

Sintaxis Formal

visible | hidden | scroll | auto

Ejemplo

HTML

<ul>
  <li><code>overflow-y:hidden</code> — Esconde el texto fuera de la caja
  <div id="div1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-y:scroll</code> — Agrega una barra scroll si se necesita
  <div id="div2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-y:visible</code> — Muestra el texto fuera de la caja si se necesita
  <div id="div3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-y:auto</code> — En la mayoría de los navegadores, equivalente a <code>scroll</code>
  <div id="div4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>
  

CSS

#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width:  250px;
  height: 100px;
}

#div1 { overflow-y: hidden; margin-bottom: 12px;}
#div2 { overflow-y: scroll; margin-bottom: 12px;}
#div3 { overflow-y: visible; margin-bottom: 120px;}
#div4 { overflow-y: auto; margin-bottom: 120px;}

Resultado

Especificaciones

Specificación Estado comentario
CSS Basic Box Model
The definition of 'overflow-y' in that specification.
Working Draft Initial definition.

Compatibilidad con Navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 Unknown (1.5) 5.0 [*] 9.5 3.0
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 (Yes) 1.0 (1.5) (Yes) (Yes) (Yes)

[*] IE8 introduced -ms-overflow-y as a synonym for overflow-y. Don't use the -ms- prefix.

Ver también

Etiquetas y colaboradores del documento

Etiquetas: 
 Colaboradores en esta página: Silly-and_Clever, teoli, Sebastianz, yvesmh
 Última actualización por: Silly-and_Clever,