À partir de Chrome 81, il n'est plus nécessaire d'ajouter des écouteurs d'événements pour forcer la réinitialisation.
Réglage du défilement CSS
permite a los desarrolladores la toile crear experiencias de desplazamiento bien controladas al declarar posiciones de ajuste de desplazamiento. Una deficiencia de la implementación actual es que el ajuste de desplazamiento no funciona bien cuando cambia el diseño, como cuando se cambia el tamaño de la ventana gráfica o se gira el dispositivo. Esta deficiencia se corrige en Chrome 81.
Interopérabilité
Beaucoup de navigateurs tienen soporte básico para CSS Faire défiler Snap. Ver Puis-je utiliser CSS Scroll Snap? pour plus d'informations.
Chrome es actualmente el único le navigateur que implementa el ajuste de desplazamiento después de los cambios de diseño. Firefox tiene un
billet ouvert pour l'implémenter et Safari a également un
billet para volver a ajustar después de que cambie el Contenu de un desplazador. Por ahora, puede simular este comportamiento agregando el siguiente código a los detectores de eventos para forzar la ejecución de un ajuste:
scroller.scrollBy(0,0);Cependant, cela ne garantit pas que la molette retournera au même élément.
Antécédents
Réglage du défilement CSS
La fonctionnalité CSS Scroll Snap permet aux développeurs Web de créer des expériences de défilement bien contrôlées en déclarant des positions d'accrochage de défilement. Ces positions garantissent que le contenu défilable est correctement aligné avec son conteneur pour surmonter les problèmes de défilement inexacts. En d'autres termes, réglage du défilement:
- Évitez les positions de défilement gênantes lors du défilement.
- Crée l'effet de pagination du contenu.
Les articles paginés et les carrousels d'images sont deux cas d'utilisation courants pour le défilement des instantanés.
Les défauts
Les positions d'accrochage sont perdues lors du redimensionnement d'une fenêtre.
L'ajustement du défilement permet aux utilisateurs de naviguer sans effort dans le contenu, mais leur incapacité à s'adapter aux changements de contenu et de mise en page bloque certains de ses avantages potentiels. Comme le montre le Exemple
Ci-dessus, les utilisateurs doivent réajuster les positions de défilement chaque fois qu'ils redimensionnent une fenêtre pour trouver l'élément précédemment ajusté. Certains scénarios courants qui provoquent des modifications de conception sont:
- Redimensionner une fenêtre
- Faire pivoter un appareil
- Ouvrez DevTools
Los dos primeros escenarios hacen que CSS Scroll Snap être menos atractivo para los usuarios y el tercero es una pesadilla para los desarrolladores a la hora de depurar. Los desarrolladores también deben considerar estas deficiencias al intentar crear una experiencia dinámica que admita acciones como agregar, eliminar o mover contenido.
Una solución común para esto es agregar oyentes que ejecuten un desplazamiento programático a través de Javascript para forzar la ejecución del ajuste cada vez que ocurra alguno de estos cambios de diseño mencionados. Esta solución puede resultar ineficaz cuando el Nom d'utilisateur espera que el desplazador vuelva al mismo contenido que antes. Cualquier manejo adicional con Javascript parece casi frustrar el propósito de esta función CSS.
Prise en charge native de la modification après les modifications de la mise en page dans Chrome 81
Les lacunes susmentionnées n'existent plus dans Chrome 81 - les curseurs resteront serrés même après avoir changé la disposition. Ils réévalueront les positions de décalage après avoir modifié leur disposition et se recalibreront à la position d'accrochage la plus proche si nécessaire. Si le déplaceur a été précédemment accroché à un élément qui existe toujours après la modification de conception, le déplaceur essaiera d'y revenir. Faites attention à ce qui se passe lorsque la conception change dans ce qui suit
Exemple.
Position de réglage perdue
Faire pivoter un appareil non conserver les positions d'accrochage dans Chrome 80. Après avoir fait défiler jusqu'à la diapositive, il est indiqué NAN et en changeant l'orientation du dispositif de portrait en paysage, un écran vide est affiché, indiquant que la position de réglage de défilement a été perdue.
Position de réglage conservée
Faire pivoter un appareil fait du conserver les positions d'accrochage dans Chrome 81. La diapositive qui indique NAN reste visible même si l'orientation de l'appareil change plusieurs fois.
Voir le Réajuster après la spécification des modifications de conception pour plus de détails.
Mise en garde: Le paramètre est également exécuté lorsque la page est chargée. Cela affecte le décalage de décalage initial des curseurs qui utilisent la fonction de réglage de décalage.
Con «Ajustar después de cambios de diseño», los desarrolladores pueden implementar barres de desplazamiento adhesivas con unas pocas líneas de CSS:
.container {
scroll-snap-type: y proximity;
}.container::after {
scroll-snap-align: finir;
affichage: bloquer;
}
Envie d'en savoir plus? Voir ce qui suit interface utilisateur de chat de démonstration pour les effets visuels.
L'ajout d'un nouveau message déclenche un nouveau paramètre, le faisant rester en bas dans Chrome 81.
Travail futur
Tous les effets de défilement de réinitialisation sont actuellement instantanés; un suivi possible est de soutenir le réajustement avec effets de défilement fluides. Voir le problème de spécification
pour plus de détails.
Retour
Vos commentaires sont inestimables pour améliorer l'ajustement après les modifications de conception, alors allez-y et essayez-le et informer les ingénieurs de Chromium que penses-tu.
