Le scroll maîtrisé avec scrollIntoView

La méthode scrollIntoView() du DOM est pratique pour faire défiler la page web de manière à ce qu'un élément devienne visible à l'écran... "dans la vue". Cela peut être utile lorsqu'un élément est en dehors de la zone visible de la page, par exemple s'il est caché sous la ligne de flottaison, ou si l'utilisateur a défillé (scrollé) la page jusqu'à un point plus éloigné.

Pour utiliser la méthode scrollIntoView(), vous devez d'abord sélectionner l'élément concerné en utilisant une méthode telle que document.querySelector() ou document.getElementById(), puis appeler la méthode scrollIntoView() sur cet élément. Par exemple :

// Sélection de l'élément à faire défiler
const el = document.querySelector('.mon-element');

// Faire défiler l'élément jusqu'à ce qu'il soit visible à l'écran
el.scrollIntoView();

La méthode scrollIntoView() accepte également des options pour contrôler comment l'élément est fait défiler. Par exemple, vous pouvez spécifier si l'élément doit être aligné en haut, en bas, à gauche ou à droite de la zone visible, ou si le défilement doit se faire en douceur ou instantanément. Pour utiliser ces options, vous pouvez passer un objet de configuration en argument de la méthode, comme dans l'exemple suivant :

// Sélection de l'élément à faire défiler
const el = document.querySelector('.mon-element');

// Options de défilement : aligner en haut, défilement en douceur
const scrollOptions = {
  behavior: 'smooth',
  block: 'start'
};

// Faire défiler l'élément jusqu'à ce qu'il soit visible à l'écran en utilisant les options spécifiées
el.scrollIntoView(scrollOptions);

La méthode scrollIntoView() permet de faire défiler un élément de la page web de manière à ce qu'il soit visible à l'écran en utilisant des options de défilement personnalisées si nécessaire. C'est bien plus efficace que les anciennes techniques qui consistaient à trouver l'élément cible, déterminer ses coordonnées en pixels dans la totalité du document et à provoquer un défilement équivalent de l'ensemble de la page avec window.scroll().