scrollIntoView : scrollons comme des dingues

• Dev
• Javascript

 

Salut l’ami(e) !

Sur un projet au taf, une demande d’un client était de pouvoir recaler une portion du site suivant l’élément déplié. C’est pas clair ? Je m’explique : vous dépliez un élément de type collapse avec un contenu assez conséquent. Puis, vous voulez aller sur un autre qui se situe 2 éléments plus bas, donc vous « scrollez » comme un dératé (oui j’ai dit que le collapse avait un contenu assez conséquent, essayez de suivre hein !) et là, c’est le drame : le collapse du haut se replie, celui sur lequel vous avez cliqué se déplie et tout remonte du coup. Et on perd naturellement l’endroit ou l’on est. Un peu perturbant effectivement comme situation :) Alors si ça l’est pour vous, développeur et développeuse chevronné(e), chevalier du Front-End, chevauchant votre fidèle éditeur de code, imaginez le gars qui vient visiter le site de votre client, simple internaute et potentiel acheteur, qui veut acheter sa paire de chaussettes licorne, taille 54 ?

 

Je m’étais fais un p’tit répertoire avec mes scripts jQuery réutilisable pour les projets. Mais depuis quelques temps, je me sens investi d’une mission : gicler à grand coup de pied au cul notre cher vieille ami jQuery. Juste pour vos petits yeux, voici le code que j’utilisais :

$('a[href^="#"].smooth').click(function(){
    var the_id = $(this).attr("href");

    $('html, body').animate({
        scrollTop:$(the_id).offset().top
    }, 'slow');
    return false;
});

Bon soyons honnête, j’ai rien inventé. Il est même fort possible que ce bout de code ait été pris sur un site genre stackoverflow où autre. Je pourrais même toujours l’utiliser si je voulais hein. Il est fonctionnel etc. Bref il fait le taf. Et puis bon comme nous utilisons bootstrap 4 et que pour l’instant bootstrap utilise toujours jQuery (hâte de voir la futur version sans jQuery !), il est vrai que je peux toujours me permettre de l’utiliser. 

Mais voilà, je m’habitue de plus en plus à faire en Javascript ce que je faisais avec jQuery. Et dans la famille Javascript, je voudrais la méthode scrollIntoView siouplait chef !

 

scrollIntoView ? Kézako ?

 

 

scrollIntoView c’est quand même bien sympa et facile d’utilisation. En gros, et je cite la MDN qui doit être ton meilleur ami si ce n’est pas déjà fait, « La méthode Element.scrollIntoView() fait défiler la page de manière à rendre l’élément visible. »

Ho chouette on dirait bien que ça fait ce que je veux, j’en ai de la chance ! Quel jeu d’acteur… Je m’aime.

 

Comment ça fonctionne ?

scrollIntoView fonctionne avec 3 options :

• behavior : Avec auto (valeur par défaut), instant et smooth, vous pouvez définir votre type de transition pour l’animation
• block : Pour savoir à  partir de quel endroit vous voulez vous arrêter pour afficher votre élément verticalement, utilisez start, center (valeur par défaut), end ou nearest. En gros si vous mettez end,  votre élément cible s’affichera complètement mais s’arrêtera en bas (end) de votre navigateur. A l’inverse vous mettez start et l’élément s’affichera encore totalement mais en haut du navigateur. Pour center pas besoin de vous faire un dessin ^^
• Inline : Alors on est sur la même chose que block mais horizontalement cette fois-ci.

scrollIntoView est vraiment intéressant car si on reprends le script plus haut en jQuery, il tient sur 7 lignes. Avec scrollIntoView, en une ligne vous pouvez gérer ça :

document.querySelector('monElementDeOuf').scrollIntoView({behavior: 'smooth', block:'start'})

Easy non ? oué je suis aussi bilingue. Hey ! Qui rigole ?!!

Et en plus là je n’ai utilisé que behavior et block mais rien ne vous empêche de mettre les 3 options !

 

Et comme un exemple est toujours mieux qu’un long discours, je vous ai préparé ça :) C’est pour moi, c’est cadeau :

 

Bref voilà pour scrollIntoView ! Une dernière chose à noter très importante, le support est presque total sur les principaux navigateurs sauf…. Safari et IOS Safari. Ce navigateur est une vraie plaie je trouve sur pas mal de chose. A l’heure ou j’écris ces quelques lignes c’est le smooth qui n’est pas supporté, donc pour ces 2 navigateurs, préférez l’utilisation du booléen qui se traduit de la façon suivante :

 document.querySelector('monElementDeOuf').scrollIntoView(true) 

Explication :

• true : Correspond à {block: « start », inline: « nearest »}
• false  : Correspond à {block: « end », inline: « nearest »}

Je pense avoir fait le tour. N’hésitez pas à consulter régulièrement caniuse.com pour le tableau des compatibilités (et à lire mon article sur la veille) !

Longue vie et prospérité !