CSS overflow-y: valores, matices এবং উদাহরণ

হোম » পাইথন » Propiedad CSS overflow-y: guía completa, valores y trucos

ওভারফ্লো-ওয়াই নিয়ন্ত্রণ এল desbordamiento উল্লম্ব: recorta, desplaza o muestra el contenido.
স্বয়ংক্রিয়/স্ক্রোল/লুকানো ক্রিয়েন প্রেক্ষাপটে ফর্ম্যাট; ক্লিপ recorta sin permitir desplazamiento.
প্যারা que surta efecto, altura সংজ্ঞায়িত করুন (o block-size) y combina con overflow-x según convenga.
অ্যাকসেসিবিলিটাড: ফোকো পোর টেকলাডো, ট্যাবিন্ডেক্স এবং ভূমিকা/নম্বরে ARIA অ্যাপোপিয়াডোস।

সিএসএস ওভারফ্লো-ই প্রোপিডেডের জন্য চিত্র

কন্ট্রোলার 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?

সম্পত্তি ওভারফ্লো-ওয়াই ইন্ডিকা আল নেভেগাডর qué hacer con el contenido que rebasa elemento por su উচ্চতর এবং নিম্নতর সীমানা. Cuando un bloque tiene más contenido del que cabe en su altura definida (o máxima), este ajuste সিদ্ধান্ত si el contenido se recorta, se hace desplazable o se deja দৃশ্যমান fuera del recuadro.

Conviene recordar su relación con su “hermana” অনুভূমিক: 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 dos valores, el primero corresponde a ওভারফ্লো-এক্স (অনুভূমিক) y el segundo a ওভারফ্লো-ওয়াই (উল্লম্ব):

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

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

সিগনিফিক্যাডো ডেটালাডো ডি ক্যাডা বীরত্ব

এটা সহজ 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. Elemento কোন se convierte en contenedor de desplazamiento; útil si no quieres limitar el contenido, pero puede provocar solapamientos con otros componentes.
গোপন: el contenido se recorta en el borde del padding; কোন 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 স্ক্রোল ম্যানুয়াল, sí puede desplazarse de forma programática (এমন উদাহরণ, con scrollTop o desplazando el foco), de modo que el elemento se contenedor de desplazamiento.
ক্লিপ: রেকর্ট এল কন্টেনিডো এন এল ওভারফ্লো ক্লিপ এজ, সংজ্ঞায়িত করা overflow-clip-marginলুকানো পার্থক্য, কোন পারমিট 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; দশ en cuenta que, aun así, al imprimir puede que el contenido desbordado se incluya según el motor de impression.
গাড়ী: স্ক্রোলের মতো, কিন্তু একা আনাদে বারাস কুয়ান্ডো ছেলে নেসেসারিয়াস. Si el contenido cabe, el resultado visual se aproxima a visible, pero 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, marcan 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 আলতুরা (উচ্চতা) বা আলতুরা ম্যাক্সিমা (সর্বোচ্চ-উচ্চতা) definidas; si trabajas en terminos lógicos, USA ব্লক-আকার অথবা সর্বোচ্চ-ব্লক-আকার. প্যারা escenarios dinámicos, aprende a obtener la altura de un elemento. En el eje অনুভূমিক ocurre lo propio con প্রস্থ/সর্বোচ্চ-প্রস্থ o ইনলাইন-আকার/সর্বোচ্চ-ইনলাইন-আকার; otra opción para forzar el desbordamiento en línea es হোয়াইট-স্পেস: নওর্যাপ.

আল elegir cualquier বীরত্ব 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 দৃশ্যমান ni ক্লিপ, el ক্লিপটি লুকানো অবস্থায় শেয়ার করা হয়েছে; conviene conocerlo para evitar resultados inesperados.

En la practica 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.

উদাহরণ র‌্যাপিডো: ফিজার লা আলতুরা এবং অ্যাক্টিভার এল স্ক্রোল উল্লম্ব

Una demostración típica consiste en acotar la altura de un bloque de texto y permitir que el exceso se desplace verticalmente. এই ক্ষেত্রে, ওভারফ্লো-ওয়াই: অটো 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 */
}

বিস্তারিত তথ্য: ওভারফ্লো-এক্স: লুকানো পরিপূরক একটি ওভারফ্লো-ওয়াই প্যারা impedir que vibraciones de লেআউট, sombras o pseudo-elementos provoquen una barra horizontal indeseada.

জাভাস্ক্রিপ্ট ব্যবহার করে নিয়ন্ত্রণ করুন

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 lista.

// 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 explicita: si usas ওভারফ্লো: ক্লিপ, ব্যবহারকারীর এজেন্ট কোন পারমিট desplazamiento programático; el contenido fuera del borde de clip no es accesible ni con el ratón ni desde JavaScript.

অ্যাক্সেসিবিলিটিড: টেকলাডো, ফোকো ওয়াই লেক্টোরেস ডি প্যান্টালা

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 ত্রুটিপূর্ণ ফোকাস করতে পারেন; en otros navegadores, añade tabindex="0" আল কনটেইনার।

আহোরা বিয়েন, সি এই পরিচয় করিয়ে দিচ্ছে ট্যাব স্টপ a ciegas, un lector de pantalla puede llegar a la región sin contexto. প্যারা মিটিগারলো, অ্যাসিগনা আন অনুসরণ (উদাহরণস্বরূপ, 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: cómo se combinan

লা প্রোপিয়েড অ্যাব্রেভিয়াডা টলমলানি permite establecer ambos ejes a la vez con uno o dos valores; cuando especificas dos, el primero es para ওভারফ্লো-এক্স এবং দ্বিতীয় জন্য ওভারফ্লো-ওয়াই. 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 valores disponibles para configurar el desbordamiento son: দৃশ্যমান, গোপন, ক্লিপ, স্ক্রল y গাড়ী. বাচ্চাদের একটি স্তর, ওভারফ্লো-এক্স gobierna el flujo অনুভূমিক 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 */
}

মনে রাখবেন যে ক্লিপ নো ক্রিয়া আন নিউভো কনটেক্সটো ডি ফরমেটো. Si necesitas ese aislamiento (por ejemplo, para gestionar floats o contener margenes colapsados), কম্বিনা ক্লিপ কন প্রদর্শন: ফ্লো-রুট y así consigues el mismo efecto de contención que aportan aportan auto/scroll/hidden.

Cuándo necesitas dimensiones explicitas

Para que el recorte o el scroll aparezcan de verdad, elemento necesita una উচ্চমানের স্থাপনা (উচ্চতা বা সর্বোচ্চ-উচ্চতা) en el eje de bloque, o su equivalente logico ব্লক-আকার/সর্বোচ্চ-ব্লক-আকার; si no, el contenedor crecerá con el contenido y el desbordamiento no se activará.

লেআউট অনুভূমিক (উদাহরণস্বরূপ, ক্যারোসেল), সংজ্ঞায়িত করুন প্রস্থ/সর্বোচ্চ-প্রস্থ o ইনলাইন-আকার/সর্বোচ্চ-ইনলাইন-আকার প্যারা ফরজার এল ডেসবর্ডামিয়েন্টো এন এল ইজে এক্স; también puedes usar হোয়াইট-স্পেস: নওর্যাপ para impedir los saltos de Línea y provocar que el contenido exceda el ancho disponible.

Evitar la barra অনুভূমিক por pseudo-elementos o sombras

আন ক্যাসো বাস্তব অনেক অভ্যাসগত: আন ছদ্ম-উপাদান ::পরে que flota hacia la derecha, o una sombra alagada, 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.

সাধারণ সমাধান: aplica overflow-x: লুকানো en el contenedor desplazable; কন্ট্রোল এল টামানো এবং পজিসিয়ন ডেল সিউডো-এলিমেন্টো (পি. ইজে।, কন রুপান্তর en lugar de posición absoluta si procede); o acota con ক্লিপ/ক্লিপ-পাথ si buscas un recorte tajante. Cualquiera de estas estrategias evita el স্ক্রোল অনুভূমিক indeseado উল্লম্বভাবে বলিদান করা ছাড়া।

ক্যাডা বীরত্ব প্রদর্শনের ফলাফল

El siguiente bloque muestra cómo cambian la visibilidad y las barras con los distintos valores de overflow-y, todos con la মিসমা আলতুরা ম্যাক্সিমা প্যারা ফরজার এল ডেসবোর্ডামিয়েন্টো উল্লম্ব:

<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 লা 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.

ইমপ্রেশন y contenido desbordado

Un detalle menos conocido: con ওভারফ্লো: স্ক্রোল, algunos motores de impresión pueden acabar imprimiendo el contenido desbordado aunque no quepa en pantalla. আপনি একটি পিডিএফ বা প্যাপেল রপ্তানি করার জন্য বিবেচনা করুন গোপন বা এমনকি এমনকি ক্লিপ অপ্রত্যাশিত প্রস্থান এড়াতে।

কম্প্যাটিবিলিডেড এন্ট্রি নেভেগাডোরস

বৈশিষ্ট্য ওভারফ্লো, ওভারফ্লো-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: ফায়ারফক্স এবং ক্রোম ১৩২+ los hacen focuseables por defecto; প্যারা এল রেস্টো, অ্যানাডে ট্যাবইনডেক্স=”0″ ম্যানুয়ালমেন্ট y un rol/nombre অ্যাক্সেসযোগ্য অভিজ্ঞতার সাথে সামঞ্জস্যপূর্ণ।

বুয়েনাস প্র্যাক্টিকাস ডি ম্যাকেটাসিয়ন

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 efecto de overflow-y.
অ্যানাড ওভারফ্লো-এক্স: লুকানো 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 sin “saltos” por aparicion/desaparición de scrollbars.
ইউএসএ ক্লিপ cuando quieras recorte duro (sin rutas de desplazamiento), y combínalo con display: flow-root si necesitas contención del flujo.

ডিওএম এবং এপিআই এর সাথে সম্পর্কযুক্ত

জাভাস্ক্রিপ্টে, DOM এক্সপোন উপচে পড়া como propiedad de estilo, y puedes inspectionar/ajustar el estado del elemento: element.style.overflowY y getComputedStyle(element).overflowY. Además, para desplazar contenidos USA স্ক্রোলটপ y স্ক্রোলটু(), 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 ট্যাবুলার হ্যাসিয়া আন এলিমেন্টো অকুলটো 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.

তবলা মানসিক র্যাপিডা ডি অপশন

প্যারা টেনেরলো ক্লারো দে আন ভিস্তাজো: দৃশ্যমান দেজা কি টুডো সোব্রেসালগা; গোপন recorta y permite scroll programático; ক্লিপ রেকর্ড এবং অনুমতি ছাড়া স্ক্রোল; স্ক্রল recorta pero siempre muestra barras; y গাড়ী একক মুয়েস্ট্রা বারাস কুয়ান্ডো এগিয়ে যান। Y recuerda que কোন দৃশ্যমান/ক্লিপ প্রেক্ষাপট তৈরি করুন, অত্যাবশ্যক প্যারা রেন্ডিমিয়েন্ট কন floats.

একত্রিতকরণের জন্য উদাহরণ

Dos patrones que verás constantemente: উল্লম্ব স্ক্রোলের অনুমতি দিন sin barra অনুভূমিক, y recortar en un eje con clip 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 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 ওভারফ্লো-এক্স: লুকানো প্যারা এভিটার বারাস ল্যাটারালেস।

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 এবং ahorra cálculos.

সাধারণ ভুলগুলি এবং কীভাবে সেগুলি এড়ানো যায়

El fallo más repetido es declarar ওভারফ্লো-ওয়াই সাইন অল্টুরা y esperar una barra que nunca llega; উচ্চতা বা সর্বোচ্চ-উচ্চতা/ব্লক-আকার নির্ধারণ করুন। El segundo es olvidarse del eje horizontal: সবসময় ভ্যালোরা ওভারফ্লো-এক্স en paralelo, sobre todo si usas sombras o pseudo-elementos.

কোন বিষয় বিবেচনা করা যায় না অভিগম্যতা: contenedores desplazables sin foco de teclado o sin nombre accessible complican la vida a usuarios con lector de pantalla. আনাদে ট্যাবইন্ডেক্স, ভূমিকা এবং এরিয়া-লেবেল cuando কোন সমুদ্র ফোকাসযোগ্য por defecto.