Controla tu desplazamiento: personaliza los efectos de "deslizar hacia abajo para actualizar" y "desbordamiento",

Resumen

La propiedad overscroll-behavior de CSS permite a los desarrolladores anular el comportamiento de desplazamiento de desbordamiento predeterminado del navegador cuando llegan a la parte superior o inferior del contenido. Entre los casos de uso, se incluye inhabilitar la función tirar para actualizar en dispositivos móviles, quitar los efectos de brillo en el sobredesplazamiento y las bandas elásticas, y evitar que el contenido de la página se desplace cuando esté debajo de una ventana modal o de superposición.

Información general

Límites de desplazamiento y encadenamiento de desplazamientos

Encadenamiento de desplazamiento en Chrome para Android.

El desplazamiento es una de las formas más fundamentales de interactuar con una página, pero ciertos patrones de UX pueden ser difíciles de manejar debido a los comportamientos predeterminados poco convencionales del navegador. Por ejemplo, considera un panel lateral de apps con una gran cantidad de elementos por los que el usuario podría tener que desplazarse. Cuando llegan a la parte inferior, el contenedor de desbordamiento deja de desplazarse porque no hay más contenido para consumir. En otras palabras, el usuario alcanza un "límite de desplazamiento". Pero observa lo que sucede si el usuario sigue desplazándose. El contenido detrás del panel lateral comienza a desplazarse. El desplazamiento lo ocupa el contenedor superior; en el ejemplo, la página principal en sí.

Resulta que este comportamiento se llama encadenamiento de desplazamiento, que es el comportamiento predeterminado del navegador cuando se desplaza por contenido. A menudo, la configuración predeterminada es bastante agradable, pero a veces no es deseable ni inesperado. Es posible que algunas apps quieran proporcionar una experiencia del usuario diferente cuando alcance un límite de desplazamiento.

Efecto tirar para actualizar

Tirar para actualizar es un gesto intuitivo popular por las apps para dispositivos móviles como Facebook y Twitter. Si abres un feed de redes sociales y las muestras, se crea un nuevo espacio para que se carguen las publicaciones más recientes. De hecho, esta UX en particular se ha vuelto tan popular que los navegadores para dispositivos móviles como Chrome en Android adoptaron el mismo efecto. Si deslizas el dedo hacia abajo en la parte superior de la página, se actualiza toda la página:

Opción personalizada de arrastrar para actualizar de Twitter
cuando actualiza un feed en su AWP.
La acción nativa de "deslizar hacia abajo para actualizar" de Chrome Android
actualiza toda la página.

En situaciones como la AWP de Twitter, tiene sentido inhabilitar la acción nativa de "deslizar para actualizar". ¿Por qué? En esta app, probablemente no quieras que el usuario actualice la página por accidente. También existe la posibilidad de ver una animación de actualización doble. Como alternativa, podría ser más bueno personalizar la acción del navegador y alinearla más estrechamente con la marca del sitio. Lo desafortunado es que este tipo de personalización ha sido complicado de llevar a cabo. Los desarrolladores terminan escribiendo código JavaScript innecesario, agregan objetos de escucha táctiles no pasivos (que bloquean el desplazamiento) o fijan toda la página en un <div> 100vw/vh (para evitar que la página se desborde). Estas soluciones alternativas tienen efectos negativos bien documentados en el rendimiento del desplazamiento.

¡Podemos hacerlo mejor!

Presentamos overscroll-behavior

La propiedad overscroll-behavior es una nueva función de CSS que controla el comportamiento de lo que sucede cuando te desplazas por un contenedor (incluida la página en sí). Puedes usarlo para cancelar el encadenamiento de desplazamiento, inhabilitar o personalizar la acción de tirar para actualizar, inhabilitar los efectos de banda elástica en iOS (cuando Safari implementa overscroll-behavior) y mucho más. La mejor parte es que usar overscroll-behavior no afecta negativamente el rendimiento de la página, como los trucos mencionados en la introducción.

La propiedad tiene tres valores posibles:

  1. auto: Predeterminado. Los desplazamientos que se originan en el elemento pueden propagarse a los elementos principales.
  2. contain: Evita el encadenamiento de desplazamiento. Los desplazamientos no se propagan a los principales, pero se muestran los efectos locales dentro del nodo. Por ejemplo, el efecto de brillo en el sobredesplazamiento en Android o el efecto de banda elástica en iOS, que notifica al usuario cuando alcanza un límite de desplazamiento. Nota: El uso de overscroll-behavior: contain en el elemento html evita las acciones de navegación por desplazamiento.
  3. none: Es igual que contain, pero también evita los efectos de sobredesplazamiento dentro del mismo nodo (p.ej., el brillo de sobredesplazamiento de Android o las bandas elásticas de iOS).

Analicemos algunos ejemplos para ver cómo usar overscroll-behavior.

Evita que los desplazamientos escapen de un elemento de posición fija

Situación del cuadro de chat

El contenido que se encuentra debajo de la ventana de chat también se desplaza :(

Considera un cuadro de chat de posición fija que se ubica en la parte inferior de la página. La intención es que el cuadro de chat sea un componente independiente y que se desplace por separado del contenido que está detrás. Sin embargo, debido al encadenamiento de desplazamiento, el documento comienza a desplazarse en cuanto el usuario llega al último mensaje del historial de chat.

Para esta app, es más apropiado hacer que los desplazamientos que se originan dentro del cuadro de chat permanezcan en el chat. Para hacerlo, podemos agregar overscroll-behavior: contain al elemento que contiene los mensajes de chat:

#chat .msgs {
  overflow: auto;
  overscroll-behavior: contain;
  height: 300px;
}

En esencia, creamos una separación lógica entre el contexto de desplazamiento del cuadro de chat y la página principal. El resultado final es que la página principal permanece en su lugar cuando el usuario llega a la parte superior o inferior del historial de chat. Los desplazamientos que comienzan en el cuadro de chat no se propagan.

Caso de superposición de página

Otra variación del caso de "desplazamiento inferior" es cuando ves contenido que se desplaza detrás de una superposición de posición fija. ¡Hay un sorteo sin fin de overscroll-behavior! El navegador intenta ser útil, pero al final hace que el sitio parezca con errores.

Ejemplo (modal con y sin overscroll-behavior: contain):

Antes: El contenido de la página se desplaza debajo de la superposición.
Después: El contenido de la página no se desplaza debajo de la superposición.

Cómo inhabilitar la función "deslizar para actualizar"

Solo se puede desactivar la acción de deslizar para actualizar con una sola línea de CSS. Solo evita el encadenamiento de desplazamiento en todo el elemento que define el viewport. En la mayoría de los casos, es <html> o <body>:

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

Con esta adición simple, se corrigen las animaciones de doble tirar para actualizar en la demostración del cuadro de chat y, en su lugar, podemos implementar un efecto personalizado que use una animación de carga más prolija. Además, toda la bandeja de entrada se desenfoca a medida que esta se actualiza:

Antes
Después

Este es un fragmento del código completo:

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%;
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refresher">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

<section id="inbox"><!-- msgs --></section>

<script>
  let _startY;
  const inbox = document.querySelector('#inbox');

  inbox.addEventListener('touchstart', e => {
    _startY = e.touches[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e => {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container
    // and user is scrolling up.
    if (document.scrollingElement.scrollTop === 0 && y > _startY &&
        !document.body.classList.contains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
</script>

Cómo inhabilitar los efectos de resplandor y banda elástica de sobredesplazamiento

Para inhabilitar el efecto de rebote cuando alcanzas un límite de desplazamiento, usa overscroll-behavior-y: none:

body {
  /* Disables pull-to-refresh and overscroll glow effect.
     Still keeps swipe navigations. */
  overscroll-behavior-y: none;
}
Antes: Cuando se alcanza el límite de desplazamiento, se muestra un brillo.
Después: Brillo inhabilitado.

Demostración completa

Para resumir, la demostración del cuadro de chat completa usa overscroll-behavior para crear una animación personalizada de "deslizar para actualizar" y evita que los desplazamientos se escapen del widget del cuadro de chat. Esto proporciona una experiencia del usuario óptima que hubiera sido difícil de lograr sin CSS overscroll-behavior.

Ver demostración | Fuente