Deslizar para revelar

Funciones web: scroll-initial-target Ajuste de desplazamiento

"Deslizar para mostrar" es un patrón de IU en el que el contenido (como una barra de búsqueda o un control de actualización) se oculta sobre la parte superior de un área desplazable en la carga inicial, y el usuario puede deslizar hacia abajo (desplazarse hacia arriba) para mostrarlo. Este patrón se usa con frecuencia en apps para dispositivos móviles y apps web para barras de búsqueda, filtros y otros controles secundarios que deben ser accesibles, pero no visibles de inmediato.

La propiedad de CSS scroll-initial-target ofrece una forma declarativa y solo de CSS para implementar este patrón. Si configuras scroll-initial-target: nearest en el elemento de contenido principal, el contenedor de desplazamiento se renderizará con el contenido oculto fuera de la vista. Anteriormente, los desarrolladores dependían de JavaScript (Element.scrollIntoView()) o de identificadores de fragmentos de URL (#content-id) para lograrlo, pero ambos tienen limitaciones y son difíciles de implementar.

Cómo implementarla

Para implementar un patrón de deslizar para revelar, haz lo siguiente:

  1. Asegúrate de que haya un contenedor de desplazamiento: El elemento de destino debe estar dentro de un contenedor de desplazamiento (un elemento con desbordamiento que permita el desplazamiento, como overflow: auto). Puede ser cualquier elemento principal, incluido el elemento raíz <html>.
  2. Define el elemento oculto: Coloca el contenido que quieres ocultar (p.ej., una barra de búsqueda) como el primer elemento subordinado dentro del contenedor de desplazamiento. Este elemento se desplazará fuera de la vista en la carga inicial.
  3. Define el contenido principal: Coloca el elemento de contenido principal inmediatamente después del elemento oculto. Este es el elemento que el usuario debería ver primero.
  4. Segmenta el contenido principal: Aplica scroll-initial-target: nearest al elemento de contenido principal para que el contenedor de desplazamiento se renderice con él desplazado a la vista, ocultando el elemento que se encuentra encima.
  5. Agrega ajuste de desplazamiento: Para asegurarte de que el elemento oculto siempre esté completamente visible o completamente oculto (y no se quede en un estado de desplazamiento parcial), agrega scroll-snap-type: y mandatory al contenedor de desplazamiento y scroll-snap-align: start tanto al elemento oculto como al elemento de contenido principal.
/**
 * ANCESTOR: Define the scroll container.
 * Scroll snapping ensures the search bar is always
 * either fully visible or fully hidden.
 */
.scroll-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

/**
 * HIDDEN ELEMENT: The search bar hidden above the fold on load.
 * It has scroll-snap-align so it snaps into place when pulled down.
 */
.search-bar {
  height: 60px;
  scroll-snap-align: start;
}

/**
 * MAIN CONTENT + TARGET: The element the user sees first.
 * scroll-snap-align makes it a valid snap point.
 * scroll-initial-target tells the browser to scroll here on
 * initial render, hiding the search bar above it.
 */
.main-content {
  scroll-snap-align: start;
  scroll-initial-target: nearest;
}

Implementación estratégica y prácticas recomendadas

  • SÍ uses scroll-initial-target: nearest cuando quieras llamar la atención del usuario hacia una parte específica de un área desplazable durante la carga y ocultar de forma intencional las unidades de la IU periféricas, como una barra de búsqueda en la parte superior.
  • NO confundas esto con el foco de accesibilidad. Esta propiedad solo mueve el viewport visual, no el enfoque del teclado. Debes administrar element.focus() de forma manual si el destino está pensado para ser el punto de partida de los usuarios de teclado.
  • NO uses esta propiedad si necesitas una animación de "desplazamiento" fluida durante la carga, ya que es discreta y establece la posición de forma instantánea durante la fase de diseño.
  • NO configures scroll-initial-target en varios elementos dentro del mismo contenedor desplazable. Si varios elementos especifican scroll-initial-target: nearest, el navegador selecciona el que aparece primero en el orden del árbol del DOM.
  • SÍ se debe tener en cuenta la jerarquía de precedencia: Un fragmento de URL (p.ej., example.com/#top) y la propiedad scroll-start a nivel del contenedor tienen prioridad sobre scroll-initial-target.

Estrategia de resguardo

En el caso de los navegadores que aún no admiten la API, usa un resguardo de JavaScript. Ten en cuenta que, para deslizar el contenido y mostrarlo, el contenido principal debe estar vinculado a la parte start (superior) del contenedor.

/**
 * Progressive Enhancement Fallback
 */
document.addEventListener("DOMContentLoaded", () => {
  // Check for native CSS support
  if (!CSS.supports("scroll-initial-target", "nearest")) {
    const targetContent = document.querySelector('.main-content.target');
    if (targetContent) {
      // Use behavior: "instant" to mimic the native CSS behavior
      // 'block: start' should match your CSS 'scroll-snap-align' (or expected top position)
      targetContent.scrollIntoView({ behavior: 'instant', block: 'start' });
    }
  }
});