Starting with Chrome 81, it is no longer necessary to add event listeners to force reset.
CSS scroll adjustment
permite a los desarrolladores Web 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.
Interoperability
Many browsers tienen soporte básico para CSS Scroll Snap. Ver Can I use CSS Scroll Snap? for more information.
Chrome es actualmente el único browser que implementa el ajuste de desplazamiento después de los cambios de diseño. Firefox tiene un
ticket open to implement this and Safari also has a
ticket para volver a ajustar después de que cambie el contents 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);However, this will not guarantee that the scroller will return to the same item.
Background
CSS scroll adjustment
The CSS Scroll Snap feature enables web developers to create well-controlled scrolling experiences by declaring scroll snap positions. These positions ensure that scrollable content is properly aligned with its container to overcome inaccurate scrolling issues. In other words, scroll adjustment:
- Avoid awkward scroll positions when scrolling.
- Creates the effect of paging the content.
Paginated articles and image carousels are two common use cases for scrolling snapshots.
Defects
Snap positions are lost when resizing a window.
Scrolling adjustment allows users to effortlessly navigate through content, but their inability to adapt to changes in content and layout blocks some of its potential benefits. As shown in the example
Above, users have to readjust scroll positions every time they resize a window to find the previously adjusted item. Some common scenarios that cause design changes are:
- Resize a window
- Rotate a device
- Open DevTools
Los dos primeros escenarios hacen que CSS Scroll Snap be 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 Username 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.
Native support for re-tweaking after layout changes in Chrome 81
The aforementioned shortcomings no longer exist in Chrome 81 - the sliders will remain tight even after changing the layout. They will re-evaluate the offset positions after changing their layout and will re-snap to the closest snap position if necessary. If the displacer was previously snapped to an element that still exists after the design change, then the displacer will try to return to it. Pay attention to what happens when the design changes in the following
example.
Adjustment position lost
Rotate a device do not retain snap positions in Chrome 80. After scrolling to the slide it says NOPE and by changing the orientation of the device from portrait to landscape, a blank screen is displayed, indicating that the scroll adjustment position was lost.
Adjusting position retained
Rotate a device make retain snap positions in Chrome 81. The slide that says NOPE remains in view even if the orientation of the device changes several times.
Watch the Readjust after design changes specification for more details.
Caution: The setting is also executed when the page is loaded. This affects the initial offset offset of the sliders that use the offset adjustment function.
Con «Ajustar después de cambios de diseño», los desarrolladores pueden implementar bars de desplazamiento adhesivas con unas pocas líneas de CSS:
.container {
scroll-snap-type: y proximity;
}.container::after {
scroll-snap-align: end;
display: block;
}
Want to learn more? See the following demo chat user interface for visual effects.
Adding a new message triggers a new setting, causing it to stick to the bottom in Chrome 81.
Future work
All reset scrolling effects are currently instantaneous; a possible follow-up is to support re-adjustment with smooth scrolling effects. Watch the specification problem
for details.
Feedback
Your feedback is invaluable in improving the fit after design changes, so go ahead and give it a try and inform Chromium engineers what you think.
