Desplácese por un registro de chat de altura fija en un teléfono y, cuando finaliza el registro, la página detrás de él sigue deslizándose. Ese traspaso es la cadena predeterminada entre desplazadores anidados y se lee a los usuarios como una página rota en lugar de una característica.

.chat-log { overflow-y: auto; overscroll-behavior-y: contain; }
dialog { overscroll-behavior: contain; }

Los tres valores

  • auto es el valor predeterminado y posee la cadena: un desplazamiento interno que llega a su final pasa el movimiento sobrante a la página.
  • contiene termina la cadena en ese elemento, por lo que la página permanece quieta mientras el usuario hace un gesto dentro de ella, que es lo que quiere un diálogo o un feed infinito.
  • Ninguno desactiva además los efectos de sobredesplazamiento, como tirar para actualizar, para las superficies donde esos comportamientos se dispararían a medio gesto y no sorprenderían a nadie felizmente.

El diálogo de bloqueo del cuerpo

El modo clásico de bloquear el cuerpo necesitaba cuñas fijas de posición en algunos motores, porque el desplazamiento táctil ignora un desbordamiento oculto oculto en algunos lugares. Agregar overscroll-behavior: contiene al diálogo maneja la mitad visible del error en los motores modernos, y el elemento del diálogo en sí ya evita que el gesto cruce la capa superior.

Alcance limitado, y esa es la virtud: la propiedad no inventa ningún comportamiento, simplemente se niega a entregar su pergamino a un extraño. Impresionante cómo es un buen pestillo de puerta.