CSS 오버플로 설정: guía completa, valores y trucos

마지막 업데이트 : 11/13/2025
저자 : C 소스트레일
  • Overflow-y controla el desbordamiento 수직: recorta, desplaza o muestra el contenido.
  • 자동/스크롤/숨겨진 크리안 컨텍스트 형식; 클립 기록을 허용합니다.
  • 결과적으로, Altura(또는 블록 크기)를 정의하고 오버플로 x 세분 집합과 결합합니다.
  • 액세스 권한: foco por teclado, tabindex y 역할/명칭 ARIA apropiados.

CSS Overflow-y 속성에 대한 설명

컨트롤은 사용할 수 있는 웹 콘텐츠에 대한 판매용 콘텐츠를 제어할 수 있습니다. 엔 에세 테레노, Overflow-y en CSS manda sobre el desbordamiento 수직, decidiendo si recortar, 대부분의 barras de desplalazamiento 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는 JavaScript 및 otros lo bloquean을 사용하여 desplazamiento를 허용하며, y hasta hay efectos colatteres que pueden provocar que un contenedor pase a ser a ser "scrollable" en ambos ejes si no se configura bien.

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

속성 오버플로-y indica al navegador qué hacer con el contenido que rebasa el elemento por su 상부 경계와 하부 경계. 확실히 알 수 있는 내용이 무엇인지 확인하고(또는 최대값), 확인된 내용에 따라 기록을 결정하고, 파괴할 수 있고 눈에 보이는 복구가 가능하다는 것을 확인하세요.

"hermana" 수평 관련 기록을 저장하는 방법: Overflow-x는 los laterales를 제어하고 izquierdo 및 derecho를 제어합니다., mientras que Overflow-y se centra en arriba y abajo. Y, por supuesto, la propiedad abreviada 과다 establecer ambos ejes a la vez con uno o dos valores를 허용하십시오.

Sintaxis y valores admitidos

En su forma más directa, overflow-y acepta los valores 숨김, 스크롤, 자동 표시; 현대적인 특정 클립이 존재합니다. 다음과 같이 선언합니다.

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

Si usas la abreviatura 과다, puedes pasar 하나의 가치. 용기를 잃으시는 분들은 많은 도움이 되시기 바랍니다. con dos valores, el primeo는 a에 대응합니다. 오버플로-x (수평) 그리고 두 번째 오버플로-y (수직의):

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

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

용맹의 세부 사항을 의미함

표면상으로 쉽게 알 수 있습니다. 특정 기능에 적합한 Cada palabra clave encierra, y algunos에는 reglas de accesibilidad y rendimiento importantes가 포함되어 있습니다.

  • 눈에 보이는 (valor por defecto): el contenido no se recorta y puede sobresalir más allá del área de padding del elemento. 엘 엘레멘토 아니 se contiere en contenedor de desplalazamiento; útil si no quieres Limitar el contenido, pero puede provocar solapamientos con otros componentes.

  • 숨겨진: el contenido se recorta en el borde del padding; 아니 세 무에스트란 바라스 데 데스플라자미엔토. 내부에 존재하는 콘텐도는 내부에 존재하지 않으며, 눈에 보이지 않습니다. Aunque el usuario no pueda hacer 스크롤 매뉴얼, sí puede desplazarse de forma programática (예를 들어, 스크롤Top 또는 desplazando el foco에 대해), de modo que el elemento se는 contenedor de desplazamiento를 고려합니다.

  • 클립: recorta el contenido en el 오버플로 클립 가장자리, definido por overflow-clip-margin. 숨겨진 차이점, no allowede desplazamiento, ni manual ni programático. 잘못된 형식에 대한 새로운 컨텍스트를 생성하지 마십시오. Aislar el flujo가 필요합니다(자동/스크롤/숨김 기능 포함). display: flow-root. Úsalo cuando quieras un corte tajante sin 스크롤 ni “resquicios”.

  • 스크롤: el contenido se recorta y 시엠프레 세 무에스트란 바라스 데 데스플라자미엔토 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 quenta que, aun así, al imprimir puede que el contenido desbordado se incluya según el motor de impresión.

  • 자동: 비슷한 두루마리이지만 솔로 아냐데 바라스 쿠안도 아들 네세사리아스. 콘텐츠의 내용을 보면 시각적으로 근접한 결과를 얻을 수 있고, 실제로 요소를 확인하고 장치의 내용을 확인할 수 있습니다. 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, marcan la diferencia: las Dimensions, el contexto de formateo, la interacción entre ejes, la impresión y el soporte de desplazamiento programático.

Para que el desbordamiento 수직 tenga efecto real, el bloque debe tener altura(높이) 또는 altura máxima(최대 높이) 확정; si trabajas en terminos lógicos, 미국 블록 크기 또는 최대 블록 크기. Para escenarios dinámicos, aprende a obtener la altura de un elemento. En el eje 수평 발생 lo propio con 너비/최대 너비 o 인라인 크기/최대 인라인 크기; 다른 옵션은 forzar el desbordamiento en lineea es입니다. 공백: nowrap.

Al elegir cualquier valor distinto de 눈에 보이는 과 클립 파라 오버플로/오버플로-y, 엘 요소 crea un nuevo contexto de formateo de bloque. 예를 들어, 스크롤할 내용이 있는 플로트 vecino reempaquete를 해제하고, degradaría el displazarse를 확인하십시오.

Hay también reglas de interacción entre ejes que sorprenden la primea vez: si estableces 눈에 보이는 en un eje y en el otro usas un valor que no sea visible ni 클립, ese visible actúa como auto. Asimismo, si pones 클립과 에제 y en el otro no es visible ni 클립, el 클립은 숨겨진 것처럼 보입니다; conviene conocerlo para evitar resultados inesperados.

En la práctica diaria, mucha gente observa que al aplicar 스크롤 또는 자동 및 eje, el elemento pasa a ser un 스크롤 컨테이너 y ciertas acciones (como pseudo-elementos que sobresalen) pueden activar también el desplazamiento en el otro eje 당신은 통제할 수 없습니다. 실제 렌더링에 대한 구체적인 내용과 모터의 일관성을 유지하는 것이 좋습니다.

빠른 속도: fijar la altura y activar el scroll 수직

데모 팁은 텍스트 블록에 대한 acotar la altura de un bloque de texto que el exeso se desplace 수직 설치를 허용하는 것으로 구성됩니다. 엔 에스테 카소, overflow-y: 자동 아냐데 라 바라 솔로 쿠안도 하가 팔타.

<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 */
}

Fíjate en el detalle: overflow-x: 숨겨진 보완 a overflow-y para impedir que vibraciones de Layout, sombras 또는 pseudo-elementos provoquen una barra 수평 indeseada.

JavaScript로 제어 및 데스플라자미엔토

Cuando el contenedor es desplazable(자동, 스크롤 또는 숨김 포함), puedes mover el contenido por código 사기꾼과 방법은 estándar como입니다. Element.scrollTop y Element.scrollTo(). 예를 들어, 시각적으로 시각적으로 알 수 있는 내부 또는 최종 목록의 살토와 같은 방식으로 허용합니다.

// 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' });

설명을 제외하면 다음과 같습니다. si usas 오버플로: 클립, el agente de usuario 프로그래밍을 허용하지 않음; el contenido fuera del borde de 클립은 JavaScript에 액세스할 수 없습니다.

액세스: teclado, foco y lectores de Pantalla

siempre es가 없는 지역은 desplalazable이 없습니다. 키보드로 초점 맞추기 가능, así que el usuario que navega sin ratón puede quedarse sin forma de desplasarla. Firefox 및 Chrome 132 또는 우수한 스크롤 내용을 포함합니다. Defecto의 포커스 가능 기능이 있습니다.; en otros navegadores, 아냐데 tabindex="0" 알 콘테네도르.

이제 잘 됐네요, si introduces ese 탭 정지 a ciegas, un lector de pantalla puede llegar a la región sin contexto. Para mitigarlo, 할당 유엔 롤 ARIA 100% (예 : role="region") y proporciona un 접근 가능한 이름 와 aria-label o aria-labelledby. Un etiquetado claro mejora la navegación asistida sin sacrificar usabilidad.

Overflow-x y Overflow-y: 조합에 참여하세요

La propiedad abreviada 과다 establecer ambos ejes a la vez con uno o dos valores를 허용하십시오. Cuando especas dos, 엘 프리메로 에스 파라 오버플로-x 두 번째는 오버플로-y. Esto facilita casos como evitar la barra 수평 및 수직 스크롤을 허용합니다.

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

빠른 기록을 위해, 아들의 계획을 구성하기 위한 많은 방법: 눈에 보이는, 숨겨진, 클립, 스크롤 y 자동. A nivel de ejes, 오버플로-x gobierna el flujo 수평 y 오버플로-y 수직으로, y puedes Combinarlos según convenga.

"클립 가장자리" y 오버플로-클립-여백

당신이 선택하면 오버플로: 클립 (o solo en el eje Y), el recorte se realiza en el denominado 보드 드 클립 드 데스보르다미엔토. 이 카드는 패딩 처리가 되어 있는 확장 장치입니다. overflow-clip-margin, que acepta una 길이 para dejar “aire” antes de recortar.

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

그 기억 클립 없음 crea un nuevo contexto de formateo. Si necesitas ese aislamiento(예를 들어, para gestionar floats o contener márgenes colapsados), 결합 클립 콘 디스플레이: flow-root 자동/스크롤/숨김 기능을 사용하면 콘텐츠 효과를 잘못 설정할 수 있습니다.

설명이 필요하면 치수를 설명해야 합니다.

Para que el recorte o el scroll aparezcan de verdad, el elemento necesita una 알투라 에스타블시다 (높이 o 최대 높이) en el eje de bloque, o su 동등한 논리 블록 크기/최대 블록 크기; 아니요, el contenedor crecerá con el contenido y el desbordamiento no se activará.

수평 레이아웃(예: 캐러셀), 정의 너비/최대 너비 o 인라인 크기/최대 인라인 크기 para forzar el desbordamiento en el eje X; 탐비엔 푸에데스 우사르 공백: nowrap para impedir los saltos de linea y provocar que el contenido exceda el ancho disponible.

Evitar la barra horizon por pseudo-elementos o sombras

Un caso real muy 습관적: 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 suced porque, al Convertirse en contenedor de 스크롤, el motor는 el área desbordada para el ejeje opuesto를 고려합니다.

일반적인 솔루션: aplica overflow-x: 숨김 en el contenedor desplazeable; 의사 요소 제어(p. ej., con) 변환 en lugar de posición absoluta si procede); 오 아코타 콘 클립/클립 경로 si Buscas un recorte tajante. Cualquiera de estas 전략 evita el 스크롤 수평 indeseado 수직적으로 희생하지 마세요.

용맹스러운 결과에 대한 데모

모든 것은 캄비안 라 가시성 및 라스 바라스에서 오버플로의 구별된 가치, 할 일과 관련하여 가장 중요합니다. misma altura máxima para forzar el desbordamiento 수직:

<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. 숨겨진, el contenido sobrante no se ve pero sigue estando ahí; 클립으로, desplazamiento를 통해 존재하지 않는 방향으로, ni si quiera con código.

Impresión y contenido desbordado

자세한 내용은 다음과 같습니다. 오버플로: 스크롤, algunos motores de impresión 푸에덴 아카바르 임프리미엔도 엘 콘테니도 데스보르다도 aunque no quepa enpantalla. Si tu caso de uso contempla는 PDF를 종이로 내보내고 우선 순위를 결정합니다. 숨겨진 또는 클립 예상치 못한 출발을 피하기 위해서.

모든 환경과 호환 가능

속성 오버플로, 오버플로-x y 오버플로-y gozan de soporte solido en los navegadores modernos desde hace muchas versiones. 엘 발로르 클립 y su compañera overflow-clip-margin 특정 especaciones más recientes에 대해 pertenecen, pero su adopción actual es amplia y crece con cada lanzamiento; Comprueba las matrices de compatibilidad si apuntas a entornos antiguos.

Desplazables에 대한 초점을 맞추면 특이한 현상이 발생합니다. Firefox 및 Chrome 132+ Los hacen focuseables por Defecto; 파라 엘 레스토, 아냐데 탭 인덱스="0" 매뉴얼 및 롤/번호는 일관성 있는 경험을 바탕으로 액세스 가능합니다.

Buenas prácticas de maquetación

No todo es poner una barra y listo: Combina propiedades para 프레베니르 데스플라자미엔토스 인디세아도스 시각적으로 확실해졌습니다. Aquí van unas pautas que funcionan muy bien en producción.

  • 차원 정의: 죄 높이/최대 높이 또는 블록 크기, 오버플로 효과와 비교하여 더 이상 유효하지 않습니다.

  • 추가 overflow-x: hidden cuando는 오버플로를 사용하고 일제 사격을 하기 위해서는 벨트 및 브레이스 수평이 필요합니다. Evitas barras laterales provocadas por sombras, bordes or pseudo-elementos.

  • Prefiere auto frente a scroll si quieres que la barra aparezca solo cuando haga falta, y scroll si 버스카스 크기는 estables de 레이아웃 sin "saltos" por aparición/desaparición de 스크롤바.

  • Usa 클립 cuando quieras recorte duro (sin rutas de desplazamiento), y 조합 디스플레이: flow-root si necesitas contención del flujo.

DOM 및 API 사용 타일과의 관계

JavaScript에서 DOM 설명 오버플로Y como propiedad de estilo, y puedes inspeccionar/ajustar el estado del elemento: element.style.overflowY y getComputedStyle(element).overflowY. Además, para desplaza contenidos usa 스크롤맨 위로 y 스크롤To(), salvo con 클립 donde no hay scroll de ningúntipo.

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

Si trabajas con enlace internos, recuerda que 테이블 형식의 hacia un elemento oculto dentro de un contenedor Hidden/auto puede hacer que el navegador 자동으로 스크롤 para ponerlo en vista; es una forma forma desplazamiento programático, útil para mejorar la navegación con teclado.

Tabla 정신적 빠른 선택

Para tenerlo claro de un vistazo: 눈에 보이는 deja que todo sobresalga; 숨겨진 스크롤 프로그램을 기록하고 허용합니다. 클립 스크롤을 기록하고 허용하지 마십시오. 스크롤 recorta pero siempre muestra barras; 와이 자동 솔로 무에스트라 바라스 쿠안도 진행. 응, 환불됐어 표시/클립 생성 컨텍스트가 없습니다., 중요한 파라 렌디미엔토 콘 플로트.

Ejemplos de Combinación por ejes

Dos Patrones que Verás Constantemente: 수직 스크롤 허용 sin barra 수평, y recortar en un eje con 클립 mientras el otro se desplaza automá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 presentses 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 클립, el 클립이 숨겨져 있음.

일반적인 사용 사례

최신 인터페이스에서 오버플로-y 감지할 수 없는 채팅 상자, 필터 패널, 라르고 메뉴, altura acotada에 대한 목록 목록이 있습니다. Se awarda con cabeceras pegajosas y footers dentro del contenedor, y suele acompañarse de overflow-x: 숨김 para evitar barras laterales.

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.

흔히 발생하는 실수와 이를 방지하는 방법

선언된 내용을 다시 반복하면 됩니다. 오버플로-y sin altura y esperar una barra que nunca llega; 높이 또는 최대 높이/블록 크기를 정의합니다. El segundo es olvidarse del eje 수평: 시엠프레 발로라 오버플로-x en paralelo, sobre todo si usas sombras o pseudo-elementos.

Un tercero es no considerar 접근 할 수 있음: contenedores desplazables sin foco de teclado o sin nombre accesible complican la vida a usuarios con lector de pantalla. 아냐데 tabindex, 역할 및 aria-label 결함이 있는 경우에는 초점을 맞출 수 없습니다.

관련 리소스

Si quieres ampliar, revisa el tutorial 일반 de CSS에 대한 desbordamiento y la referencia del overflowY에 대한 DOM 엔 요소. 기본적으로는 호환성과 구현 기능의 특성을 확인해야 합니다.

Dominar Overflow-y 암시적 진입자 qué recorta, cuándo se desplaza, como interactúa con el eje opuesto y qué efecto Tiene en el contexto de formateo; 차원에 대한 액세스, Overflow-x의 조합, 로그 패널의 유체 흐름, sin barras imrevistas 및 desplazamiento suave tanto para usuarios como para scripts와 함께 사용할 수 있습니다.

관련 기사 :
해결됨: 요소 참조의 높이를 얻습니다.

관련 게시물: