Coder une navigation latérale avec un effet ScrollSpy

[@matq.2949]

Je suis encore loin de pouvoir intégrer un tel ScrollSpy de code... Mais j'ai passé un bon moment ! Je m'abonne pour plus tard ou pour d'autres vidéos :). Merci !

[@sophielefaucheux]

Merci pour ce tuto ! Scrollspy ;)

[@Nico-rw2tl]

Super tuto, pas évident, mais super quand même ! :D

[@saadfarid2675]

Exactement ce dont j'avais besoin ❤

[@nanannguettasalomonkouakou2426]

super tuto

[@franklinturtletek8957]

scrollspy! Elégant.

[@lmz-dev]

Dans la mesure où tu as des ancres 16:20 tu peux utiliser le css scroll-behavior smooth sur l'élement scrollé et ça va le faire tout seul ;p Ensuite tu peux utiliser un tick avec requestAnimationFrame mais avec un compteur pour ne déclencher les calculs que toutes les 12 frames soit 200ms par exemple. Donc soit on laisse tourner le tick en permanence si on en a besoin pour d'autres actions sur le scroll, soit on ne l'appelle que sur l'événement scroll ... C'est bien plus cours au niveau du code et ça ne bouffe pas plus de ressources que ça car tu travailles onEnterFrame comme dans le temps en AS avec Flash ! (Ha mince, maintenant tu sais que je suis un vieux)

[@EcoleduWeb]

Merci pour ton commentaire et tes remarques! Je n'ai justement pas utilisé scroll-behavior car ce n'est pas supporté partout et la dernière fois que j'ai fait une vidéo dessus je me suis pris plein de remarques aha ! J'ai pensé à l'utilisation de RAF mais je suis finalement resté sur le code de la vidéo, il faudrait faire des tests pour voir ce qu'il en retourne, en tout cas c'est malin :)

[@lmz-dev]

​@@EcoleduWeb Ha ? D'après caniuse, à par sur IE qui disparait tranquillement, scroll-behavior ça fonctionne. Sur Safari depuis peu, on est d'accord. Bref ça donnera des idées à tes élèves ! ;p Safari on en parle ? Nan mais là c'est incroyable qu'une boite comme Apple, qui brasse autant de pognon, ne soit pas foutue de produire un navigateur aux normes et multiplateforme. Microsoft l'a bien fait LOL Safari est le seul navigateur où on ne peut pas utiliser les références arrières (lookbehind) dans les expression régulières ... en 2022 !!! «il faudrait faire des tests pour voir ce qu'il en retourne, en tout cas c'est malin» Ça fonctionne parfaitement, j'utilise l'équivalent de watch (en plus poussé) qui n’était supporté que par Firefox je crois. C'est du fait maison pour du SPA, c'est à dire qu'il n'y qu'un seul petit script pour une page qui scanne les blocs qui contient un attribut "spa" avec une chaine json qui dit quel script js ou css charger et quoi/quand faire pour ce bloc. L'attribut spa est supprimé quand tout est initialisé et vérifie avant si les js/css sont déjà chargés ou pas ... Je ne charge et initialise que quand le bloc est visible à plus ou moins "y" dans la vue, comme dans ce cours ou un cours précédent. Tout n'est pas appelé pas toutes les 16,66 ms, il y a une temporisation en fonction des besoins ... Par exemple, le cours où tu charges des posts à l'infini, au début il n'y a que le titre, dès que le scroll arrive près du titre, le script qui sert à tout ça est chargé et prend la relève avec de nouveau un watch temporisé pour chargé vérifier la position du "repère" tous les 200ms ce qui évite de bouffer des ressources inutilement. Contrairement au sites qui chargent toute l'appli au départ avec un vilain loader, bah je ne charge que ce qu'il y a besoin en allant .. que du bonheur ;p

[@jeandarius8791]

Svp pourriez-vous faire une vidéo sur les attributs html ? ( aria, data- et d'autres)? 🙏

[@laurentretriever3403]

scrollspy mais j'voue que c'est compliqué à suivre ^^ je vais réduire d'1 voire2 niveau niveau de difficulté

[@EcoleduWeb]

Bravo aha. C’est vrai que ça devient vite corsé quand on se lance dans les coordonnées en JS 👍

[@foxypiratecove37350]

Ça sert à quoi React ?

[@erwansoulas5359]

ScrollSpy

[@widevfront1863]

Scrollspy

[@jules_________]

28:31 mais je me demande si ducoup c'est pas moins performant parce que tu fais un if a chaque fois nan ?

[@EcoleduWeb]

C’est négligeable ici et c’est soit ça soit un recalcul de data pour rien. Il faut savoir que ce code ne se déclenche que lorsque l’élément se fait resize (après la première exécution). Donc je pense que la machine va le supporter 🤖

[@jules_________]

@@EcoleduWeb ok 😁

[@drisskaci5975]

scrollSpy