Le scroll maîtrisé avec scrollIntoView

Astucejavascript

Publié par le , mis à jour le (7837 lectures)

scroll 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().

Commentaires

« pratique pour faire défiler un élément de la page web de manière à ce qu'il devienne visible à l'écran »

C'est phrase est ambigue. Ce serait plutôt : « faire défiler la page jusqu'à ce l'élément soit visible à l'écran ».

Dans la même logique, est-ce que c'est accompagné d'une nouvelle méthode qui permet de savoir si un élément est visible à l'écran ?

@Yordi : c'est la méthode "IntersectionObserver ( )" de l'interface de l' "API Intersection Observer" qui permet de savoir si un élément est visible à l'écran.

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.