Chrome 144 tiene un pequeño cambio
overscroll-behavior: Ahora también funciona en contenedores desplazables no desplazables. Si bien este cambio puede parecer trivial, resuelve un problema con el que los desarrolladores han estado lidiando durante años: evitar que las páginas se desplacen mientras se desplazan. (modal)<dialog>está abierto.
¡Sí! En 2019, me comprometí a «Evitar el desplazamiento de página al abrir modal» Habla con Brad Wu al respecto. Al parecer esto fue hace apenas unos meses. Tenemos HTML real <dialog> elemento. De todos modos, puedes ver el problema con el desplazamiento activo cuando el «diálogo» está abierto:
El problema es que el cuadro de diálogo en sí no es un contenedor de desplazamiento. Si es así, podemos abofetear overscroll-behavior: contain Simplemente termina con esto. Brad demuestra su solución, que implica un enfoque de JavaScript que establece <body> Posicionamiento fijo cuando el cuadro de diálogo está abierto:
Esto es lo que Brahms llama ajuste. En Chrome 144, este ya no es el caso. Volviendo a la primera demostración, hay algunas cosas que podemos hacer para evitar todas las tonterías de JS.
Primero, declaramos overscroll-behavior en el elemento de diálogo y el fondo y configúrelo en contain:
body {
overscroll-behavior: contain;
}
#dialog {
overscroll-behavior: contain;
}Podrías pensar que eso es todo, pero hay un último paso crucial. El diálogo debe ser un contenedor de desplazamiento, lo cual podemos hacer explícitamente:
#dialog {
overscroll-behavior: contain;
overflow: hidden;
}Por supuesto requiere Chrome 144:
La demostración proporcionada por Bramus es mucho mejor porque trata con HTML real. <dialog> elementos y sus ::backdrop:
Enlace directo →
