Share
Il peut être difficile pour les développeurs Web de garantir une expérience de défilement bien contrôlée, mais heureusement, un module CSS intitulé «Scroll Snap» promet de vous aider. Il appliquera l'endroit où se termine une position de défilement après la fin d'une opération de défilement.
Ce module contient, entre autres, des fonctionnalités permettant de contrôler des facettes telles que le panoramique, associé à des «positions de capture», et produit un alignement particulier du contenu dans un conteneur à défilement..
Le W3C a récemment publié Scroll Snap en tant que recommandation candidate qui inclut des implémentations bien pensées et des exemples avec une syntaxe mise à jour. Plongeons dedans.
Pour bien comprendre le pouvoir de la capture par défilement et son fonctionnement, nous devons comprendre sa terminologie. Cela vous aidera également à éviter toute confusion lorsque ces nouveaux termes sont utilisés tout au long de ce didacticiel..
L’alignement de défilement a lieu dans un “snapport” ou un “scrollport”; Cependant, les deux signifient la même chose et peuvent également être référencés comme un "conteneur de défilement". C’est la région où réside votre comportement d’accrochage de défilement, comme indiqué dans le diagramme ci-dessus (bordure pointillée externe). Les intentions sont d'aider à imposer les positions de défilement sur lesquelles le port de défilement d'un conteneur de défilement se terminera après la fin d'une opération de défilement..
Chaque élément de ce “snapport” est appelé “zone de capture” et constitue le ou les objets que vous allez cibler. Chaque zone de capture contient une "position de capture", également définie par la "position de capture" du conteneur de défilement et représentée par la ligne pointillée rouge dans le diagramme ci-dessus..
Avec la terminologie utilisée, examinons quelques exemples et voyons comment cette fonctionnalité fonctionne dans la vie réelle. Si vous souhaitez en savoir plus sur les autres types de cas d'utilisation, vous pouvez commencer par cet exemple du W3C en utilisant une galerie de photos comme cas de démonstration, et ici également. Il existe également une mise à jour intéressante de la spécification CR des modules d’août 2017 qui énonce un comportement intriguant qui :cible devrait posséder.
Au moment d'écrire ces lignes, il est préférable d'afficher les démos suivantes avec Safari 11, car les autres navigateurs (pris en charge) ne prennent pas totalement en charge la nouvelle syntaxe, en dépit des données de caniuse et des tests personnels..
L'exemple ci-dessous ne présente que les propriétés très minimales requises pour initier le comportement CSS Scroll Snap et n'inclut aucun polyfill, car je n'ai pas pu trouver un polyfill fonctionnel fonctionnant avec la syntaxe la plus récente. Il est également bon de noter que tout conteneur de défilement nécessitera une autre propriété CSS connue, appelée débordement.
La démo ci-dessus tire parti de l'axe des Y comme position d'accrochage, mais vous pouvez le faire aussi facilement sur l'axe des x. Si vous n'avez pas Safari 11 sur votre système, voici un enregistrement d'écran montrant la fonctionnalité de démonstration en direct fournie ci-dessus..
Les panneaux se cassent parfaitement. Notez que lorsque je défile, il y a un point où la vitesse de défilement prend le dessus et avance à la case suivante. Assez vif hein?
Voici une deuxième démo présentant l'axe des ordonnées pour afficher des images de manière très similaire à une galerie..
Lorsque l'utilisateur fait défiler horizontalement, la quantité de mouvement atteint le centre mort de la zone de défilement et de sélection, quelle que soit la taille de l'image..
Il est maintenant temps de passer en revue et d'expliquer les propriétés réelles en ce qui concerne leur syntaxe et les valeurs acceptées.
La spécification Scroll Snap actuelle ne contient que quatre propriétés et chacune joue un rôle important. Ces quatre propriétés sont…
Accentsconagua
type de défilementscroll-snap-alignrembourrage de défilementmarge de défilementExaminons de plus près et expliquons ce que chacun fait, où il est défini et quels types de valeurs sont acceptés.
type de défilementCette propriété spécifie si un conteneur de défilement est en fait un «conteneur d'accrochage de défilement» ou un «snapport», comment il est capturé de manière stricte et quels axes sont utilisés. Si aucune valeur de rigueur n'est spécifiée, le proximité la valeur est passée comme valeur par défaut. Cette propriété accepte également une autre valeur qui aide à définir «l’axe de capture». Cela vous permettrait de transmettre deux valeurs de votre choix (c.-à-d.. scroll-snap-type: y obligatoire). Dans ce cas, nous déclarons la type instantané se produit uniquement dans l'axe des ordonnées et est obligatoire.
Axe de défilement: X, y, bloc, en ligne, ou tous les deux
X: Le conteneur de défilement s'aligne sur les positions d'alignement uniquement sur son axe horizontal.y: Le conteneur de défilement s'aligne sur les positions d'alignement uniquement sur son axe vertical.bloc: Le conteneur de défilement s'aligne sur les positions d'alignement uniquement dans son axe de bloc.en ligne: Le conteneur de défilement s'aligne sur les positions d'alignement uniquement dans son axe en ligne.tous les deux: Le conteneur de défilement s'aligne de manière indépendante sur les positions d'accrochage sur ses deux axes (potentiellement sur différents éléments de chaque axe).Scroll Snap Strictness: aucun, proximité, et obligatoire
aucun: Si spécifié sur un conteneur de défilement, le conteneur de défilement ne doit pas être capturé.proximitéRemarque: Si spécifié sur un conteneur de défilement, le conteneur de défilement doit être accroché à une position de capture en l'absence d'opération de défilement active. S'il existe une position d'accrochage accessible, le conteneur de défilement doit s'accepter à la fin d'un défilement (s'il n'en existe aucun, aucun accrochage n'a lieu)..obligatoire: Si spécifié sur un conteneur de défilement, le conteneur de défilement peut s'accrocher à une position d'accrochage à la fin d'un défilement.scroll-snap-alignLa propriété scroll-snap-align spécifie la position d'accrochage d'un conteneur de défilement sous la forme d'un alignement de sa zone d'accrochage (en tant que sujet de l'alignement) dans le snapport de son conteneur d'accrochage (en tant que conteneur d'alignement). Les deux valeurs spécifient l'alignement d'accrochage dans les axes inline et block, respectivement. Si une seule valeur est spécifiée, la deuxième valeur par défaut est la même. Les valeurs acceptées sont aucun, centre, début et fin.
En bref, cette propriété est définie pour les enfants suivants du conteneur de défilement et accepte deux valeurs. La première valeur représente l'axe des x tandis que les secondes représentent l'axe des y; par exemple… scroll-snap-align: centre de départ.
aucun: Cette case ne définit pas de position d'accrochage dans l'axe spécifié.début: Commencez l'alignement de la zone d'accrochage du défilement de cette zone dans le snapport du conteneur de défilement est une position d'accrochage dans l'axe spécifié.fin: Fin de l'alignement de la zone d'accrochage de défilement de cette zone dans le snapport du conteneur de défilement est une position d'accrochage dans l'axe spécifié.centre: L'alignement du centre de la zone d'accrochage du défilement de cette zone dans le snapport du conteneur de défilement est une position d'accrochage dans l'axe spécifié.rembourrage de défilementLes valeurs de défilement remplissent, lorsqu'elles sont déclarées, des décalages pour un conteneur de défilement et réduisent la zone de défilement considérée comme "visible". Cela n'a aucun effet sur la présentation, l'origine du défilement, la position initiale et si un élément est considéré réellement visible. Il existe deux formes, très similaires à la propriété de remplissage standard de CSS, mais il existe également une version longue telle que scroll-padding-top, et scroll-padding-bottom, par exemple.
marge de défilementCes valeurs représentent des externalités lorsqu'elles sont déclarées pour un conteneur de défilement définissant la zone d'accrochage du défilement utilisée pour accrocher des éléments au snapport. Cela fonctionne et agit comme le marge propriété, y compris les variantes sténographiques et longues telles que scroll-margin-top, et scroll-margin-bottom.
En raison des récentes mises à jour publiées dans le brouillon actuel de l'éditeur, vous constaterez un manque de soutien général et l'absence de polyfill, comme je l'ai mentionné. Il y a aussi une chance que la propriété scroll-snap-stop est à risque et pourrait être abandonné pendant la période de référence. J'ai aussi découvert lors de mes recherches et de mes expérimentations que hauteur min ne fonctionne pas lorsqu'il est défini sur le conteneur d'accrochage de défilement à ce stade. Il se peut que d'autres propriétés produisent les mêmes résultats, et si vous les trouvez, veuillez les laisser dans les commentaires ci-dessous..
Donc, c’est CSS Scroll snapping à partir d’une vue d’ensemble élevée. Est-ce que ça vaut le coup? Trouveriez-vous cela utile? Ou devrait-il être placé dans les coins sombres de l'univers pour ne plus jamais être retrouvé? Laissez vos commentaires ci-dessous et, comme toujours, codage heureux!
