Le saviez-vous – scrollIntoView() en JS pour défiler vers un élément.

Also available in: English

Il n’y a pas si longtemps j’ai vu un des développeurs avec lesquels je travaille écrire une fonction très complexe pour permettre un défilement fluide vers un élément plus bas dans la page. J’ai été assez surpris qu’il n’utilise pas scrollIntoView() et son paramètre behavior de valeur smooth. Ça vous parle ?

Quand on a l’habitude de faire d’une certaine manière, difficile de se remettre en question notamment lorsque les projets sont un peu tendus en terme de timing. Souvent, même, en tant que développeurs, vous avez tendance à vous créer un petit fichier d’utilities ou de helpers pour éviter d’avoir à réécrire les petites fonctions utiles que vous avez l’habitude de réutiliser.

J’avais moi-même écrit une petit fonction il y a un moment en utilisant jQuery (eh oui ça date :p).
Smoothscroll en jQuery.

Smooth-scroll au clic avec scrollIntoView()

Imaginez une ancre interne dans une page, lorsque l’utilisateur clic sur le lien vous souhaitez proposer un défilement fluide jusqu’au début de cet élément (ici la cible est #part-3). C’est possible rapidement avec ce petit bout de code JavaScript.

const target = document.getElementById('part-3'),
      button = document.getElementById('goto');

button.addEventListener('click', function(){
	
	target.scrollIntoView({
		block: 'start',
		behavior: 'smooth',
		inline: 'nearest'
	});
	
});

Comme vous pouvez le voir, rien de bien sorcier. Les paramètres sont les suivants, ils sont tous optionnels :

• block : quelle partie du bloc vous souhaitez atteindre parmi start, center, end ou nearest (par défault start).
• behavior : comment rejoindre ce bloc, parmi les options auto ou smooth, (par défaut auto).
• inline : où rejoindre l’élément si c’est un scroll horizontal, parmi start, center, end ou nearest (par défault nearest)

Une petite démonstration sur CodePen pour illustrer mon propos.

Voir la démo sur CodePen 0

SmoothScroll à l’ajout d’un élément dans la page

Un des cas d’usage qui se présente assez régulièrement, c’est le cas d’un ajout de section dans une page après une action de l’utilisateur, ou d’un nouvel élément dans une liste par exemple. C’est une bonne manière de permettre à l’utilisateur de mieux comprendre ce qu’il vient de se passer à l’écran en le guidant vers l’élément qu’il a lui même demandé d’ajouter.

Voici une démo de Todo List utilisant localStorage pour enregistrer votre liste et scrollIntoView() pour vous mener aux nouveaux item créés.

Voir la démonstration

J’avais commencé une démo sur CodePen mais ce dernier est buggé lorsqu’il s’agit de récupérer des données localStorage. Mais vous pouvez toujours l’utiliser et le forker.

Voir la démo sur CodePen 0

Un coup d’oeil sur le support :

Allons plus loin ?

CSS utilise le même principe pour modifier le comportement de scroll dans un élément défilable. Apprenez-en plus grâce à cet article : CSS Smooth-Scrolling avec Scroll-Behavior.

N’hésitez pas si vous avez des cas d’usage à présenter, les commentaires sont ouverts pour ça. 🙂