Propiedad CSS overflow-y: пълна игра, стойности и грешки

Начало » Питон » Propiedad CSS overflow-y: пълна игра, стойности и грешки

Controlar cómo se comporta el contenido cuando se sale del contenedor es clave para un diseño web limpio y useable; en ese terreno, overflow-y en CSS manda sobre el desbordamiento vertical, decidiendo si recortar, mostrar barras de desplazamiento o dejar que el contenido se asome fuera del cuadro.

Más allá de lo básico, hay matices que cambian por completo el resultado: ciertos valores activan un nuevo contexto de formateo, algunos permiten desplazamiento con JavaScript y otros lo bloquean, y hasta hay efectos colaterales que pueden provocar que un contenedor pase a ser “scrollable” en ambos ejes si no se configura bien.

¿Qué es overflow-y y para qué sirve?

Собствеността препълване indica al navegador qué hacer con el contenido que rebasa el elemento por su горна и долна граница. Cuando un bloque tiene más contenido del que cabe en su altura definida (o máxima), este ajuste decisi si el contenido se recorta, se hace desplazable o se deja visible fuera del recuadro.

Conviene recordar su relación con su “hermana” horizontal: overflow-x controla los laterales izquierdo y derecho, mientras que overflow-y se centra en arriba y abajo. Y, por supuesto, la propiedad abreviada преливане permite establecer ambos ejes a la vez con uno o dos valores.

Синтаксис и допуснати стойности

В по-директния си вид, препълване и приемане на стойностите скрит, превъртане, автоматично видим; desde especificaciones modernas también existe клип. Puedes declararla así:

/* CSS */
selector {
  overflow-y: hidden | scroll | auto | visible | clip;
}

Ако използвате съкращенията преливане, може да се пропусне една или две стойности. Con un valor, se aplica a ambos ejes; con dos valores, el primeroresponde a препълване-x (хоризонтално) и второто препълване (вертикално):

/* Un solo valor, aplica a X e Y */
.container { overflow: auto; }

/* Dos valores: overflow-x overflow-y */
.panel { overflow: hidden auto; }

Significado detallado de cada valor

Es fácil quedarse en la superficie, pero cada palabra clave encierra un comportamiento específico, y algunos incluyen reglas de accesibilidad y rendimiento importantes.

• видим (храбър поради дефект): el contenido no se recorta y puede sobresalir más allá del área de padding del elemento. El elemento no se convierte en contenedor de desplazamiento; útil si no quieres limitar el contenido, pero puede provocar solapamientos con drugi componentes.

• скрит: el contenido se recorta en el borde del padding; no se muestran barras de desplazamiento. El contenido sigue existiendo en el flujo interno, pero no es visible fuera del área. Aunque el usuario no pueda hacer scroll manual, sí puede desplazarse de forma programática (por ejemplo, con scrollTop o desplazando el foco), de modo que el elemento se considera contenedor de desplazamiento.

• клипсзапишете съдържанието в преливащ се ръб на клипса, определено от overflow-clip-marginСкрита разлика, no permite desplazamiento, ni manual ni programático. No crea un nuevo contexto de formateo por sí mismo; si necesitas aislar el flujo (como haría auto/scroll/hidden), combínalo con display: flow-root. Úsalo cuando quieras un corte tajante sin scroll ni „resquicios“.

• превъртетесъдържанието се записва и siempre se muestran barras de desplazamiento en el eje al que aplique, haya o no desbordamiento real. Esta constancia evita que las barras aparezcan y desaparezcan cuando el contenido fluctúa; ten en cuenta que, aun así, al imprimir puede que el contenido desbordado se incluya según el motor de impresión.

• автоматиченподобно на свитък, но solo añade barras cuando son necesarias. Si el contenido cabe, el resultado visual se aproxima a visible, pero el elemento ya actúa como contenedor de desplazamiento y además establece un nuevo contexto de formateo por motivos de rendimiento y reflujo con elementos flotantes.

Matices esenciales que cambian el resultado

Hay cinco detalles que no conviene pasar por alto y que, en la práctica, markan la diferencia: las dimensiones, el contexto de formateo, la interacción entre ejes, la impresión y el soporte de desplazamiento programático.

Para que el desbordamiento vertical tenga efecto real, el bloque debe tener altura (височина) o altura máxima (максимална височина) определения; si trabajas en términos lógicos, САЩ размер на блока o максимален размер на блока. Para escenarios dinámicos, aprende a obtener la altura de un elemento. En el eje horizontal ocurre lo propio con ширина/максимална ширина o размер на реда/максимален размер на реда; otra opción para forzar el desbordamiento en línea es бяло пространство: nowrap.

Al elegir cualquier valor distinto de видим и клипс за препълване/препълване-y, елемент crea un nuevo contexto de formateo de bloque. Esto evita que, por ejemplo, un float vecino reempaquete el contenido en cada paso de scroll, algo que degradaría el rendimiento al desplazarse.

Hay también reglas de interacción entre ejes que sorprenden la primera vez: si estableces видим в дупето y en el otro usas un valor que no sea visible ni clip, ese видимо действително като автомобилАсимизъм, ако понесеш клип на мама y en el otro no es visible ni щипка, ел клипът се държи като скрит; conviene conocerlo para evitar resultados inesperados.

En la práctica diaria, mucha gente observa que al aplicar превъртете или автоматично в устройството, елементът преминава през контейнер за превъртане y ciertas acciones (como pseudo-elementos que sobresalen) pueden activar también el desplazamiento en el otro eje si no se controla bien. Es un comportamiento coherente con la especificación y los motores de renderizado actuales.

Пример бързо: fijar la altura и activar el scroll vertical

Una demostración típica consiste en acotar la altura de un bloque de texto y permitir que el exceso se desplace verticalmente. En este caso, препълване-y: автоматично añade la barra solo cuando haga falta.

<div class="caja">
  <p>Texto largo...</p>
  <p>Más texto...</p>
</div>

.caja {
  max-height: 220px;
  padding: 12px;
  border: 1px solid #ccc;
  overflow-y: auto;   /* barra vertical solo si es necesaria */
  overflow-x: hidden; /* evitamos scroll horizontal accidental */
}

Залепете в детайлите: overflow-x: скрито допълнение към overflow-y para impedir que vibraciones de layout, sombras or pseudo-elementos provoquen una barra horizontal indeseada.

Control y desplazamiento con JavaScript

Cuando el contenedor es desplazable (автоматично, превъртане или включено скрито), puedes mover el contenido por código con propiedades y métodos estándar como Element.scrollTop y Element.scrollTo(). Esto permite, por ejemplo, llevar el foco visual a un ancla interior o simular un salto al final de la list.

// Desplazar 200px hacia abajo
const panel = document.querySelector('.panel');
panel.scrollTop = 200;

// O ir con precisión a una posición
panel.scrollTo({ top: 0, behavior: 'smooth' });

Hay una excepción explícita: ако САЩ преливат: клип, потребителският агент no permite desplazamiento programático; el contenido fuera del borde de clip no es acesible ni con el ratón ni desde JavaScript.

Accesibilidad: teclado, foco y lectores de pantalla

Unárea desplazable no siempre es фокусиране с клавиатура, así que el usuario que navega sin ratón puede quedarse sin forma de desplazarla. En Firefox y en Chrome 132 o superior, los contenedores de scroll se hacen focuseables por defecto; en otros navegadores, añade tabindex="0" състезателя.

Сега добре, ако го представите табулатор a ciegas, un lector de pantalla puede llegar a la región sin contexto. Para mitigarlo, asigna un рол ARIA адекватно (например role="region") и пропорционално на достъпен номер с aria-label o aria-labelledby. Un etiquetado claro mejora la navegación asistida sin sacrificar usabilidad.

Overflow-x y overflow-y: може да се комбинира

Съкратеният имот преливане permite establecer ambos ejes a la vez con uno o dos valores; cuando especificas dos, el primero es para препълване-x а втората за препълване. Esto facilita casos como evitar la barra horizontal a la vez que permites scroll vertical.

/* Evita barra horizontal, permite scroll vertical si hace falta */
.contenedor { overflow: hidden auto; }

Como recordatorio rápido, los valures disponibles para configurar el desbordamiento son: видим, скрит, клипс, превъртете y автоматиченНиво на очите, препълване-x gobierna el flujo horizontal y препълване el vertical, y puedes combinarlos según convenga.

„Изрязване на ръб“ и препълване на полето за изрязване

Ако решите препълване: клип (o solo en el eje Y), el recorte se realiza en el denominado borde de clip de desbordamiento. Ese borde puede extenderse más allá del padding gracias a overflow-clip-margin, който приема едно longitud para dejar “aire” antes de recortar.

.tarjeta {
  overflow-y: clip;              /* cortar sin permitir scroll */
  overflow-clip-margin: 8px;     /* recorta 8px por fuera del padding */
}

Не забравяйте, че clip no crea un nuevo contexto de formateo. Si necesitas ese aislamiento (por ejemplo, para gestionar floats o contener márgenes colapsados), combina clip con дисплей: корен на потока y así consigues el mismo efecto de contención que aportan auto/scroll/hidden.

Cuándo necesitas dimensiones explícitas

Para que el recorte o el scroll aparezcan de verdad, el elemento necesita una установена височина (височина или максимална височина) en el eje de bloque, o su equivalente lógico размер на блока/максимален размер на блока; si no, el contenedor crecerá con el contenido y el desbordamiento no se activará.

En layouts horizontales (por ejemplo, carousele), дефинирайте ширина/максимална ширина o размер на реда/максимален размер на реда para forzar el desbordamiento en el eje X; también puedes usar бяло пространство: nowrap para impedir los saltos de línea y provocar que el contenido exceda el ancho disponible.

Evitar la barra horizontal por pseudo-elementos or sombras

Un caso real muy habitual: un pseudo-elemento ::след que flota hacia la derecha, o una sombra alargada, sobrepasa el contenedor y активиране на хоризонталната лента en un elemento que ya tiene overflow-y. Esto sucede porque, al convertirse en contenedor de scroll, el motor considera el área desbordada para el eje opuesto.

Типични решения: приложение препълване-x: скрито en el contenedor desplazable; controla el tamaño y posición del pseudo-elemento (p. ej., con трансформира en lugar de posición absoluta si procede); o акота кон клип/път-на-клипа si buscas un recorte tajante. Cualquiera de estas estrategias evita el scroll horizontal indeseado без да жертваш вертикала.

Demostración de resultsados ​​con cada valor

El siguiente bloque muestra cómo cambian la visibilidad y las barras con los distintos valores de overflow-y, todos con la максимална височина para forzar el desbordamiento vertical:

<div class="demo visible">Contenido largo...</div>
<div class="demo hidden">Contenido largo...</div>
<div class="demo clip">Contenido largo...</div>
<div class="demo scroll">Contenido largo...</div>
<div class="demo auto">Contenido largo...</div>

.demo {
  max-height: 140px;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #bbb;
}
.visible { overflow-y: visible; }
.hidden  { overflow-y: hidden; }
.clip    { overflow-y: clip; }
.scroll  { overflow-y: scroll; }
.auto    { overflow-y: auto; }

Забележи това превъртане siempre muestra la barra вертикално, mientras que auto solo lo hace cuando el texto excede la altura. En hidden, el contenido sobrante no se ve pero sigue estando ahí; en clip, directamente no existe una vía de desplazamiento, ni si quiera con código.

Impresión y contenido desbordado

Un detalle menos conocido: con препълване: превъртане, algunos motores de impresión pueden acabar imprimiendo el contenido desbordado aunque no quepa en pantalla. Si tu caso de uso contempla exportar a PDF o papel, pruébalo y resolve si prefieres скрит или дори клипс para evitar salidas inesperadas.

Compatibilidad entre navegadores

Имотите препълване, препълване-x-y препълване-y gozan de soporte sólido en los navegadores modernos desde hace muchas versiones. Ел доблест клипс и твоята спътница overflow-clip-margin pertenecen a especificaciones más recientes, pero su действителното осиновяване е широко y crece con cada lanzamiento; comprueba las matrices de compatibilidad si apuntas a entornos antiguos.

En cuanto al foco de contenedores desplazables, recuerda la peculiaridad: Firefox и Chrome 132+ los hacen focuseables por defecto; para el resto, añade tabindex=”0″ manualmente y un rol/nombre достъпно за una experiencia consistente.

Buenas prácticas de maquetación

No todo es poner una barra y listo: combina propiedades para prevenir desplazamientos indeseados y ganar en estabilidad visual. Aquí van unas pautas que funcionan muy bien en producción.

• Дефиниране на размери: без височина/максимална височина или размер на блок, el contenedor crecerá y no verás el el el effecto de overflow-y.

• Добавяне на overflow-x: скрито cuando използва overflow-y, salvo que necesites belt-and-braces horizontales. Evitas barras laterales provocadas por sombras, bordes o pseudo-elementos.

• Предпочитайте автоматично превъртане отпред si quieres que la barra aparezca solo cuando haga falta, y scroll si buscas dimensiones estables de layout sin “saltos” por aparición/desaparición de scrollbars.

• Usa clip cuando quieras recorte duro (sin rutas de desplazamiento), y combínalo con display: flow-root si necesitas contención del flujo.

Relación con el DOM и APIs útiles

В JavaScript, DOM се разкрива препълване como propiedad de estilo, y puedes inspeccionar/ajustar el estado del elemento: element.style.overflowY y getComputedStyle(element).overflowY. Además, para desplazar contenidos usa превъртанеНагоре y scrollTo(), salvo con clip donde no hay scroll de ningún tipo.

const panel = document.querySelector('.panel');
panel.style.overflowY = 'auto';
if (getComputedStyle(panel).overflowY !== 'visible') {
  panel.scrollTo({ top: panel.scrollHeight, behavior: 'smooth' });
}

Si trabajas con enlaces internos, recuerda que табличен хачиа un elemento oculto dentro de un contenedor hidden/auto puede hacer que el navegador автоматично превъртане para ponerlo en vista; es una forma legítima de desplazamiento programático, útil para mejorar la navegación con teclado.

Tabla mental rápida de opciones

Para tenerlo claro de un stazo: видим вече не знам всичко за хазарта; скрит recorta y permite scroll programático; клипс запис и не е позволено свиване; превъртете recorta pero siempre muestra barras; г автоматичен solo muestra barras cuando procede. Y recuerda que no visible/clip crea contexto de formateo, vital para rendimiento con floats.

Ejemplos de combinación por ejes

Dos patrones que verás constantemente: разреши вертикално превъртане sin barra horizontal, y recortar en un eje con clip mientras el otro se desplaza avtáticamente.

/* Scroll vertical, sin horizontal */
.lista {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Recorte duro en X, desplazamiento automático en Y */
.panel {
  overflow-x: clip;
  overflow-y: auto;
  display: flow-root; /* contén el flujo si lo necesitas */
}

Ten presentes las reglas de interacción: si un eje usa un valor distinto de visible/clip y el otro pone visible, ese visible se повдигане на автомобил. Con clip sucede algo parecido: si el otro eje no es visible ni clip, el клипът е действителен като скрит.

Обичайни случаи на употреба

В модерните интерфейси, препълване е неразбираем за кутии за чат, панели за филтри, големи менюта, регистрационни файлове или списъци с алтура акотада. Se complementa con cabeceras pegajosas y footers dentro del contenedor, y suele acompañarse de препълване-x: скрито за избягване на страничните пръти.

En diseños con tarjetas o modales, puedes alternar entre автоматичен (para no mostrar la barra si no hace falta) y превъртете (para estabilizar el ancho cuando aparecería la barra durante la carga). Si el modal debe recortar partes decorativas, клипс evita interacciones y ahorra cálculos.

Често срещани грешки и как да ги избегнем

El fallo más repetido es declarar препълване и без височина y esperar una barra que nunca llega; дефинирайте височина o максимална височина/размер на блок. El segundo es olvidarse del eje horizontal: винаги стойностна overflow-x en paralelo, sobre todo si usas sombras or pseudo-elementos.

Третото не се счита за необходимо. достъпност: contenedores desplazables sin foco de teclado o sin nombre acesible complican la vida a usuarios con lector de pantalla. Añade tabindex, роля и aria-label cuando no sea focuseable por defecto.

Recursos relacionados

Si quieres ampliar, revisa el tutorial general de отклонява се от CSS и препратката на DOM за препълване en elementos. Estas páginas cubren desde fundamentos hasta peculiaridades finas de implementación y compatibilidad.

Dominar overflow-y имплицитно съдържание qué recorta, cuándo se desplaza, cómo interactúa con el eje opuesto y qué efecto tiene en el contexto de formateo; con las pautas de dimensiones, accesibilidad y combinación con overflow-x, es sencillo lograr paneles fluidos, sin barras imprevistas y con un desplazamiento suave tanto para usuarios como para scripts.