Comment utiliser CSS Scroll Snap

Online Coding Courses for Kids

Nada Rifki
Nada est un développeur JavaScript qui aime jouer avec les composants de l’interface utilisateur pour créer des interfaces avec une grande expérience utilisateur. Elle se spécialise dans Vue.js et aime partager tout et n’importe quoi qui pourrait aider ses collègues développeurs Web frontaux. Nada se lance également dans le marketing numérique, la danse et le chinois.

9 mars 2020


2 min de lecture
837

L’idée de n’avoir besoin que de CSS pour personnaliser votre parchemin au lieu de jouer avec JavaScript sonne bien, n’est-ce pas?

Aujourd’hui, je vais vous montrer comment CSS Scroll Snap vous aide à faire exactement cela.

Alors, que fait CSS Scroll Snap?

Je parie que vous avez utilisé certaines bibliothèques pour contrôler le comportement de défilement de votre site Web. Je l’ai fait et j’ai passé des moments terribles avec certains d’entre eux.

Certaines de ces bibliothèques peuvent faire baisser les performances et l’expérience utilisateur de votre page.

Sans oublier qu’il est vraiment difficile de gérer tous les bugs qu’ils génèrent parfois lorsque vous ajoutez de la complexité à vos nouvelles mises à jour de conception.

C’est pourquoi je préfère utiliser cette simple fonctionnalité CSS qui me permet de faire défiler ma page sans avoir à compter sur les bibliothèques JavaScript.

Ces propriétés m’aident également à économiser une tonne de temps.

En termes simples, CSS Scroll Snap effectue la capture de défilement, verrouillant la fenêtre à un point spécifique (que vous indiquez) avec chaque défilement.

Un défilement linéaire, d’autre part, se déplace en fonction de la vitesse du contrôleur – que ce soit une souris, un geste tactile ou des touches fléchées.

Voyons maintenant comment fonctionne CSS Scroll Snap.

Si vous voulez passer directement à un exemple concret, rendez-vous dans la troisième section où j’ai construit le carrousel Instagram avec quelques lignes de code CSS.

Commençons.

Fonctionnement de CSS Scroll Snap

CSS Scroll Snap fonctionne en appliquant deux propriétés principales: scroll-snap-type et scroll-snap-align.

Voici ce que vous devez savoir sur chacun:

  • Le premier, scroll-snap-type, est appliqué au conteneur parent. Il accepte deux arguments: la direction d’accrochage et le comportement d’accrochage:
.container {
 scroll-snap-type: [ x | y | block | inline | both ] [ mandatory | proximity ];
}

À propos des arguments de comportement d’accrochage: choix proximity fait que l’accrochage n’apparaît qu’au point le plus proche de l’endroit où l’utilisateur a arrêté le défilement.

D’autre part, mandatory rend le composant logiciel enfichable se produire à la position spécifique que vous choisissez lorsque l’utilisateur fait défiler.

  • Le deuxième, scroll-snap-align, est appliqué aux enfants du conteneur.

C’est là que vous spécifiez le point d’accrochage pour l’axe x et l’axe y:

.children {
 scroll-snap-align: [ none | start | end | center ]{1,2};
}

Avant de continuer, il est important de noter que rien de tout cela ne fonctionnera sauf si vous spécifiez le débordement du conteneur et lui donnez une hauteur fixe.

En outre, vous ne devez jamais utiliser obligatoire si le contenu de l’un de vos éléments enfants est plus long que le conteneur parent. Si vous le faites, l’utilisateur ne pourra pas voir ce contenu.

Il y a deux autres propriétés dont nous devons nous familiariser:

  1. scroll-padding (appliqué au conteneur parent) ressemble beaucoup à la propriété de remplissage CSS et agit comme décalage. Vous avez aussi scroll-padding-top, scroll-padding-bottom, scroll-padding-left et scroll-padding-right.
  2. scroll-margin (appliqué aux enfants du conteneur) est également similaire à la propriété CSS margin et sert de point de départ. Vous avez aussi scroll-margin-top, scroll-margin-bottom, scroll-margin-left et scroll-margin-right.

Si vous souhaitez en savoir plus sur toutes les propriétés d’accrochage par défilement et les futures, les Documentation de Mozilla est toujours un bon point de départ.

Comment utiliser CSS Scroll Snap pour créer un carrousel de type Instagram

Pour vous aider à mieux appréhender ce concept, j’ai réalisé un petit carrousel de type Instagram sur codepen.

Voir la démo en direct ici:

CSS Scroll Snap – Carrousel de type Instagram

Pas de description

Comme vous pouvez le voir, il comprend sept boîtes de tailles différentes.

Ce qui m’étonne, c’est que nous n’avons rien d’autre à faire que d’ajouter les lignes CSS ci-dessous pour que le défilement se fasse automatiquement sur chaque case.

%MINIFYHTMLd76ee57715f2f5a334434f401305319915%

Résoudre ce problème avec uniquement JavaScript aurait nécessité beaucoup de travail supplémentaire.

CSS Scroll Snap est-il compatible avec tous les navigateurs?

Bon, passons maintenant à la question à un million de dollars: prise en charge multi-navigateurs.

Comme vous pouvez le voir ici, la fonctionnalité CSS Scroll Snap est bien prise en charge par les navigateurs modernes.

Le seul problème que vous rencontrerez est avec Internet Explorer et Firefox, qui nécessitent une ancienne version des spécifications que vous pouvez trouver ici.

Aussi, je vous conseille d’ajouter la propriété -webkit-overflow-scrolling: touch; à votre conteneur pour prendre en charge les appareils iOS.

Conclusion

C’est à peu près ça!

C’est si simple, mais il y a eu des moments où cela aurait pu me faire économiser des heures de code. Essayez d’implémenter un accrochage au défilement à l’aide de JavaScript et recalculez le point d’accrochage avec chaque élément enfant avec des largeurs différentes, et vous verrez ce que je veux dire.

Si vous avez des questions ou des remarques, n’hésitez pas à me le faire savoir dans les commentaires ou à me cingler sur Twitter @RifkiNada. Je réponds toujours.

Votre front-end monopolise le processeur de vos utilisateurs?

Alors que les interfaces Web deviennent de plus en plus complexes, les fonctionnalités gourmandes en ressources exigent de plus en plus du navigateur. Si vous souhaitez surveiller et suivre l’utilisation du processeur côté client, l’utilisation de la mémoire, etc. pour tous vos utilisateurs en production, essayez LogRocket.https://logrocket.com/signup/

LogRocket est comme un DVR pour les applications Web, enregistrant tout ce qui se passe dans votre application Web ou votre site. Au lieu de deviner pourquoi les problèmes surviennent, vous pouvez agréger et générer des rapports sur les principales mesures de performances frontales, relire les sessions utilisateur ainsi que l’état de l’application, consigner les requêtes réseau et détecter automatiquement toutes les erreurs.

Modernisez la façon dont vous déboguez les applications Web – .


Close Menu