ampproject / ampproject/amp-react-prototype

Scroll events and component state

Abierto
#41 2 comentarios 0 reacciones 0 asignados Ver en GitHub
TBD
Lenguaje dominante
JavaScript
Estrellas
36
Forks
6
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

Context: https://github.com/ampproject/amp-react-prototype/blob/c4c7373542f30feda4a1b539db1781f88bdc5063/src/amp-react-carousel.js#L65

Scroll event management is difficult for carousels, especially with smooth scrolling: the container can scroll slowly from slide to slide and at some point we need to update the state to the new "current" slide. Nuances:
1. The scroll events are generally aligned with rAF so if we update state on each scroll event, we will see a significant number of re-renderings.
2. Waiting for scrolling to end is complicated and often introduces some lag. It can also introduce some possibility of lost sync. This could be improved a lot with the new [scrollend event](https://github.com/WICG/overscroll-scrollend-events).
3. We can throttle scroll events and that'd generally be acceptable performance-wise.
4. Smooth scrolling introduces another nuance: with single-pass rendering, `onScroll` recalculates the current slide and updates the component's state. In turn, the state change issues a side-effect to update the container's `scrollLeft`. This is a weird cyclical (and possibly buggy) behavior. All-in-all it might be better to just implement the `scrollend`.

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza en la línea enlazada de src/amp-react-carousel.js y sigue cómo onScroll determina la diapositiva actual, actualiza el estado del componente y cambia el scrollLeft del contenedor. Evalúa el throttling frente al evento scrollend propuesto; se considera terminado cuando el estado de la diapositiva actual permanece sincronizado durante el desplazamiento suave, sin volver a renderizar excesivamente ni producir una actualización de desplazamiento cíclica.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, react
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.