Establece un objetivo de desplazamiento para la renderización inicial

La propiedad de CSS scroll-initial-target ofrece una forma declarativa y solo de CSS de llevar un elemento descendiente específico al área visible de su contenedor de desplazamiento en cuanto se renderiza ese contenedor. Anteriormente, los desarrolladores dependían de JavaScript (Element.scrollIntoView()) o de identificadores de fragmentos de URL (#item-id), que tienen limitaciones y son difíciles de implementar.

Cómo implementarla

Para implementar esto correctamente, 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. Segmenta el elemento: Aplica scroll-initial-target: nearest al elemento descendiente específico que quieras mostrar.

Código de ejemplo: Feed de contenido multimedia vertical

En este ejemplo, un feed comienza desplazado a un elemento "destacado" específico en lugar de a la parte superior de la lista.

/** 
 * TARGET: The item that should be visible on initial load.
 */
.item.target {
  scroll-initial-target: nearest;
}

Implementación estratégica y prácticas recomendadas

• SÍ usa scroll-initial-target para experiencias de "inicio medio", como un calendario que comienza en el día actual o una galería que comienza en una imagen específica.
• 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Í proporciones las dimensiones del contenido multimedia. Dado que la posición de desplazamiento se calcula durante el diseño inicial, asegúrate de que las imágenes o los videos tengan aspect-ratio o height/width fijos para evitar que el objetivo cambie después de que se cargue el contenido multimedia.
• 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. Usa el evento DOMContentLoaded para asegurarte de que el navegador desplace el elemento hasta la vista en cuanto se complete el análisis del HTML, lo que proporciona una experiencia más rápida que esperar a que se carguen todas las imágenes y los recursos. Como alternativa, también se puede colocar la secuencia de comandos al final del elemento <body>, lo que evita la necesidad de un objeto de escucha de eventos.

/**
 * Progressive Enhancement Fallback
 */
document.addEventListener("DOMContentLoaded", () => {
  // Check for native CSS support
  if (!CSS.supports("scroll-initial-target", "nearest")) {
    const feedTarget = document.querySelector(".item.target");
    if (feedTarget) {
      // 'block: center' ensures the featured media is centered in view
      feedTarget.scrollIntoView({ behavior: "instant", block: "center" });
    }
  }
});