overscroll-behavior
comportamiento de sobredesplazamiento
`overscroll-behavior` controla lo que ocurre cuando un área de desplazamiento llega a su borde. Puede evitar que el desplazamiento continúe hacia un área superior y puede cambiar el efecto del borde.
Otro ejemplo
Una herramienta de mapa tiene una lista larga de capas. `overscroll-behavior: contain` permite a las personas desplazarse por esa lista sin mover la página detrás de ella. El panel mantiene su retroalimentación normal en los bordes. La página principal se desplaza normalmente después de que el puntero deja el panel.
Partes principales
- 01Desplazador anidado
- 02Límite de desplazamiento
- 03Política de encadenamiento
Úsalo cuando
Use `contain` en un borde de desplazamiento interno planificado, como un mapa, cajón o editor de código.
No lo uses cuando
No desactives el desplazamiento excesivo para todo el sitio. Puede eliminar la navegación normal y la retroalimentación del dispositivo sin arreglar el diseño.
Nombre usado en código
overscroll-behavior: auto|contain|none Antes de lanzarlo
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with comportamiento de sobredesplazamiento (overscroll-behavior). User context: Una herramienta de mapa tiene una lista larga de capas. `overscroll-behavior: contain` permite a las personas desplazarse por esa lista sin mover la página detrás de ella. El panel mantiene su retroalimentación normal en los bordes. La página principal se desplaza normalmente después de que el puntero deja el panel. Design concept to apply: comportamiento de sobredesplazamiento (overscroll-behavior). Why it fits: Use `contain` en un borde de desplazamiento interno planificado, como un mapa, cajón o editor de código. Do not use it when: No desactives el desplazamiento excesivo para todo el sitio. Puede eliminar la navegación normal y la retroalimentación del dispositivo sin arreglar el diseño. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Un documento formal aún puede ser un borrador, un release candidate o una versión final. Revisa su estado y la compatibilidad con tu navegador o plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how comportamiento de sobredesplazamiento (overscroll-behavior) is used now. Definition: `overscroll-behavior` controla lo que ocurre cuando un área de desplazamiento llega a su borde. Puede evitar que el desplazamiento continúe hacia un área superior y puede cambiar el efecto del borde. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.