L'intermédiaire

Tout est dans le titre n’est-ce pas ? Mais ne pourrait-on pas en faire une question ? Réaliser un scroll horizontal sans Javascript est-il possible, voire souhaitable ? Analyse d’une situation.

Le scroll horizontal

Le scroll horizontal quand vous naviguez sur un site web c’est plutôt cool. Vous l’avez sûrement remarqué, il y en a pas mal sur les site web avec comme double objectif, de gagner de la place sur la hauteur, mais également d’ajouter une effet waw sur le contenu qu’on serait curieux d’explorer. Ca a donc toute sa place sur la toile, alliant à la fois le design et un ensemble de contenu répétitif. Seulement, voilà, tout design a ses limites et il est conseillé pour ce type de section de l’utiliser avec parcimonie et sans dérouter l’utilisateur qui scroll habituellement de manière verticale (eh oui !).
Comment alors coder une telle section tout en étant accessible, performant, mobile-friendly (desktop / mobile / trackpad).

Voilà mon Codepen pour illustrer l’exercice dont il est question :

Les propriétés que je ne connaissais pas concernent essentiellement le scroll. Les voici :

• overscroll-behavior-x: contain;
• scroll-snap-type: x proximity;
• scrollbar-gutter: stable;

Celle qui nous intéresse est la suivante : overscroll-behavior-x : contain ;
Cette dernière bloque la propagation du scroll horizontal. Le scroll reste confiné à la section parente.
Le scroll vertical global continue donc de fonctionner. L’objectif est alors atteint.

Sans Javascript ?

Je vous assure qu’il y existe encore des personnes n’activant pas le javascript sur son navigateur ! Mais ce n’est pas seulement pour eux, et en plus que de limiter les langages de votre projet, Javascript peut aider à faire défiler le contenu horizontal alors qu’on continue de scroller verticalement. Ce qui est très cool, mais comme dit plus haut, sans doute à utiliser avec parcimonie, au risque de fatiguer votre visiteur. Voilà quand même un exemple sans utiliser Javascript, en utilisant néanmoins les animations au scroll prévu maintenant par CSS. Le code est inspiré de ce site dont je vous ai déjà parlé. Il faudra par contre jouer avec les différentes tailles d’écrans et d’éléments composants votre section. Voilà le code :

Ici, l’astuce est la suivante : .pin-wrap-sticky est rendu fixe, et c’est .pin-wrap qui est animé dans la ViewTimeline pendant le scroll de la section. Il faut donc calculer le nombre d’éléments et leur largeur pour visionner tous les éléments jusqu’au bout du scroll horizontal pour enfin continuer la visite du site verticalement.

Scroll horizontal sans Javascript ?

Je dis oui ! Les méthodes aujourd’hui existent pour éviter les libraires comme GSAP qui est vraiment super depuis de nombreuses années, mais qui peut alourdir votre code.