À partir de Chrome 81, vous n'avez plus besoin d'ajouter d'écouteurs d'événements pour forcer l'ancrage.
L'ancrage de défilement CSS permet aux développeurs Web de créer des expériences de défilement bien contrôlées en déclarant des positions d'ancrage pour le défilement. L'un des inconvénients de l'implémentation actuelle est que l'ancrage du défilement ne fonctionne pas bien lorsque la mise en page change, par exemple lorsque la fenêtre d'affichage est redimensionnée ou que l'utilisateur fait pivoter l'appareil. Ce problème est résolu dans Chrome 81.
Interopérabilité
De nombreux navigateurs sont compatibles avec la fonctionnalité CSS Scroll Snap. Consultez la section Can I use CSS Scroll Snap? (Puis-je utiliser l'ancrage de défilement CSS ?) pour en savoir plus.
Chrome est actuellement le seul navigateur à implémenter l'ancrage du défilement après un changement de mise en page. Firefox propose un ticket ouvert pour implémenter cela et Safari propose également un ticket ouvert pour ancrer de nouveau une fois après la modification du contenu d'un conteneur de défilement. Pour l'instant, vous pouvez simuler ce comportement en ajoutant le code suivant aux écouteurs d'événements pour forcer l'exécution d'un ancrage :
javascript
scroller.scrollBy(0,0);
Cependant, cela ne garantit pas que le conteneur de défilement reviendra au même élément.
Contexte
Aligner sur le défilement CSS
La fonctionnalité d'ancrage de défilement CSS permet aux développeurs Web de créer des expériences de défilement bien contrôlées en déclarant les positions d'ancrage du défilement. Ces positions permettent de s'assurer que le contenu à faire défiler est correctement aligné avec son conteneur afin de résoudre les problèmes de défilement imprécis. En d'autres termes, l'ancrage du défilement:
- Évite les positions de défilement maladroites lors du défilement.
- Crée l'effet de pagination dans le contenu.
Les articles paginés et les carrousels d'images sont deux cas d'utilisation courants des captures d'écran de défilement.
Limitations
L'ancrage du défilement permet aux utilisateurs de parcourir facilement le contenu, mais son incapacité à s'adapter aux changements de contenu et de mise en page bloque certains de ses avantages potentiels. Comme le montre l'exemple ci-dessus, les utilisateurs doivent réajuster les positions de défilement lorsqu'ils redimensionnent une fenêtre pour trouver l'élément précédemment ancré. Voici quelques scénarios courants qui entraînent une modification de la mise en page:
- Redimensionner une fenêtre
- Faire pivoter un appareil
- Ouvrir les outils de développement
Les deux premiers scénarios rendent l'ancrage de défilement CSS moins attrayant pour les utilisateurs, et le troisième est un cauchemar pour les développeurs lors du débogage. Les développeurs doivent également tenir compte de ces lacunes lorsqu'ils essaient de créer une expérience dynamique permettant d'effectuer des actions telles que l'ajout, la suppression ou le déplacement de contenu.
Une solution courante consiste à ajouter des écouteurs qui exécutent un défilement programmatique via JavaScript pour forcer l'ancrage à s'exécuter chaque fois que l'une de ces modifications de mise en page se produit. Cette solution de contournement peut s'avérer inefficace lorsque l'utilisateur s'attend à ce que le conteneur de défilement revienne au même contenu qu'auparavant. Toute utilisation supplémentaire de JavaScript semble presque aller à l'encontre de l'objectif de cette fonctionnalité CSS.
Prise en charge intégrée de la fonctionnalité d'ancrage après un changement de mise en page dans Chrome 81
Les lacunes mentionnées n'existent plus dans Chrome 81: les défilements restent activés même après la modification de la mise en page. Ils réévaluent les positions de défilement après avoir modifié leur mise en page et s'ancrent à nouveau à la position d'ancrage la plus proche si nécessaire. Si le conteneur de défilement a déjà été ancré à un élément qui existe toujours après le changement de mise en page, il tente de s'y reconnecter. Faites attention à ce qui se passe lorsque la mise en page change dans l'exemple suivant.
NOPE et modifié l'orientation de l'appareil du mode portrait au mode paysage, un écran vide s'affiche, ce qui indique que la position d'ancrage du défilement a été perdue.
NOPE reste visible même si l'orientation de l'appareil change plusieurs fois.
Pour en savoir plus, consultez la spécification concernant le nouvel ancrage après les modifications de la mise en page.
Exemple: Barres de défilement persistantes
Avec l'option "Aligner après les modifications de mise en page", les développeurs peuvent implémenter des barres de défilement persistantes avec quelques lignes CSS:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
Vous voulez en savoir plus ? Consultez l'interface utilisateur du chat de démonstration pour voir les visuels.
Travaux futurs
Tous les effets de défilement d'un ancrage sont actuellement instantanés. Un suivi potentiel consiste à permettre l'ancrage à nouveau avec des effets de défilement fluide. Pour en savoir plus, consultez la section concernant le problème de spécification.
Commentaires
Vos commentaires sont inestimables pour améliorer les prises de vue suite à des modifications de mise en page. Alors, continuez à l'essayer et dites aux ingénieurs de Chromium ce que vous en pensez.