À partir de Chrome 81, vous n'aurez plus besoin d'ajouter d'écouteurs d'événements pour forcer rattachement.
Ancrage du défilement CSS permet aux développeurs Web de créer des expériences de défilement bien contrôlées en déclarant faire défiler les positions d'ancrage. L'un des inconvénients de l'implémentation actuelle 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 une rotation de l’appareil. Ce problème est corrigé dans Chrome 81.
Interopérabilité
De nombreux navigateurs sont compatibles de base avec la fonctionnalité CSS Scroll Snap. Consultez la section Puis-je utiliser des fichiers CSS Faites défiler Snap ? pour en savoir plus.
Chrome est actuellement le seul navigateur à implémenter l'ancrage du défilement après la mise en page
des modifications. Firefox dispose d'un
ticket ouvert pour
dans ce cas. Safari dispose également d'un fichier
billet pour raccrocher après un
le contenu du
défileur change. Pour l'instant, vous pouvez simuler ce comportement en ajoutant
le code suivant aux écouteurs d'événements afin de forcer l'exécution d'un ancrage:
javascript
scroller.scrollBy(0,0);
Toutefois, cela ne garantit pas l'alignement sur
.
Contexte
Aligner le défilement CSS
La fonctionnalité d'accrochage du défilement CSS permet aux développeurs Web de créer expériences de défilement en déclarant les positions d'ancrage du défilement. Ces positions s'assurer que le contenu à faire défiler est correctement aligné avec son conteneur résoudre les problèmes de défilement imprécis. En d'autres termes, faire défiler l'ancrage:
- Empêche les positions de défilement gênantes lors du défilement.
- Crée l'effet de la pagination dans le contenu.
Les articles paginés et les carrousels d'images sont deux cas d'utilisation courants du défilement s'enclenche.
<ph type="x-smartling-placeholder">
Limitations
<ph type="x-smartling-placeholder">L'ancrage du défilement permet aux utilisateurs de naviguer facilement dans le contenu, une incapacité à s'adapter aux changements de contenu et de mise en page bloque une partie de son potentiel avantages. Comme indiqué dans l'exemple ci-dessus, les utilisateurs doivent réajuster les positions de défilement chaque fois que vous redimensionnez une fenêtre pour pour trouver l'élément ancré précédemment. Quelques scénarios courants à l'origine de la mise en page modification sont:
- Redimensionner une fenêtre
- Faire pivoter un appareil
- Ouvrir les outils de développement
Les deux premiers scénarios rendent la fonctionnalité CSS "Défilement Snap" moins attrayante pour les utilisateurs le troisième est un cauchemar pour les développeurs lors du débogage. Les développeurs doivent également tenez compte de ces lacunes lorsque vous essayez de créer une expérience dynamique prend en charge 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 à une exécution à chaque fois que l'une des mises en page mentionnées les changements se produisent. Cette solution de contournement peut s'avérer inefficace lorsque l'utilisateur s'attend à ce que pour revenir au même contenu. Toute autre gestion avec JavaScript semble aller à l'encontre de l'objectif de cette fonctionnalité CSS.
Possibilité d'effectuer un nouvel ancrage après une modification de la mise en page dans Chrome 81
Les problèmes mentionnés n'existent plus dans Chrome 81: les éléments de défilement resteront même après un changement de mise en page. Il réévaluera les positions de défilement après modifiez leur disposition, puis ancrez à nouveau la position 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 la la mise en page change, la barre de défilement essaiera de revenir à cette mise en page. Faites attention aux que se passe-t-il lorsque la mise en page change exemple.
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.
Reportez-vous à la section Ancrer à nouveau après un changement de mise en page spécifique pour en savoir plus plus de détails.
Exemple: Barres de défilement persistantes
Avec l'option "Aligner après modification de la mise en page", les développeurs peuvent implémenter des barres de défilement persistantes avec quelques lignes de CSS:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
Vous voulez en savoir plus ? Regardez la démonstration en chat UI pour les visuels.
<ph type="x-smartling-placeholder">Travaux futurs
Tous les effets de défilement avec ancrage sont actuellement instantanés. un suivi potentiel est pour permettre le réancrage avec un défilement fluide. effets. Reportez-vous au problème de spécification. pour en savoir plus.
Commentaires
Vos commentaires nous sont précieux, car ils nous aident à améliorer l'ajout de tags après la modification de la mise en page. essayez-le et laissez les ingénieurs Chromium savoir ce que vous penser.