Définir une cible de défilement pour l'affichage initial

La propriété CSS scroll-initial-target offre un moyen déclaratif, uniquement en CSS, d'afficher un élément descendant spécifique dans la zone visible de son conteneur de défilement dès que ce conteneur est affiché. Auparavant, les développeurs s'appuyaient sur JavaScript (Element.scrollIntoView()) ou sur des identifiants de fragment d'URL (#item-id), qui présentent tous deux des limites et sont difficiles à implémenter.

Implémentation

Pour réussir cette implémentation :

1. Assurez-vous d'avoir un conteneur de défilement : l'élément cible doit se trouver dans un conteneur de défilement (un élément avec un dépassement qui permet le défilement, comme overflow: auto). Il peut s'agir de n'importe quel élément ancêtre, y compris l'élément racine <html>.
2. Ciblez l'élément : appliquez scroll-initial-target: nearest à l'élément descendant spécifique que vous souhaitez afficher.

Exemple de code : flux multimédia vertical

Dans cet exemple, un flux commence par faire défiler l'écran jusqu'à un élément "sélectionné" spécifique plutôt que tout en haut de la liste.

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

Implémentation stratégique et bonnes pratiques

• À FAIRE : Utilisez scroll-initial-target pour les expériences de type "middle-start", comme un calendrier commençant le jour actuel ou une galerie commençant sur une image spécifique.
• NE CONFONDEZ PAS ce concept avec le focus d'accessibilité. Cette propriété ne déplace que la fenêtre d'affichage visuelle. Elle ne déplace pas le focus clavier. Vous devez gérer manuellement element.focus() si la cible est destinée à être le point de départ des utilisateurs du clavier.
• N'UTILISEZ PAS cette propriété si vous avez besoin d'une animation de défilement fluide lors du chargement. Cette propriété est discrète et définit la position instantanément pendant la phase de mise en page.
• NE DÉFINISSEZ PAS scroll-initial-target sur plusieurs éléments d'un même conteneur déroulant. Si plusieurs éléments spécifient scroll-initial-target: nearest, le navigateur sélectionne celui qui apparaît en premier dans l'ordre de l'arborescence DOM.
• À FAIRE : Indiquez les dimensions des contenus multimédias. Étant donné que la position de défilement est calculée lors de la mise en page initiale, assurez-vous que les images ou les vidéos ont un aspect-ratio ou un height/width fixe pour éviter que la cible ne se déplace après le chargement du contenu multimédia.
• À FAIRE : Tenez compte de la hiérarchie de priorité. Un fragment d'URL (par exemple, example.com/#top) et la propriété scroll-start au niveau du conteneur sont tous deux prioritaires sur scroll-initial-target.

Stratégie de remplacement

Pour les navigateurs qui ne sont pas encore compatibles avec l'API, utilisez une solution de remplacement JavaScript. Utilisez l'événement DOMContentLoaded pour vous assurer que le navigateur fait défiler l'élément jusqu'à ce qu'il soit visible dès que l'analyse HTML est terminée. Cela permet d'offrir une expérience plus rapide que d'attendre que toutes les images et ressources soient chargées. Vous pouvez également placer le script à la fin de l'élément <body>, ce qui évite d'avoir à utiliser un écouteur d'événements.

/**
 * 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" });
    }
  }
});