ampproject / ampproject/amp-react-prototype

Scroll events and component state

Aperta
#41 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
TBD
Lingua principale
JavaScript
Stelle
36
Fork
6
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

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`.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla riga collegata in src/amp-react-carousel.js e segui come onScroll ricava la diapositiva corrente, aggiorna lo stato del componente e modifica lo scrollLeft del contenitore. Valuta il throttling rispetto all’evento scrollend proposto; il lavoro è completato quando lo stato della diapositiva corrente rimane sincronizzato durante lo scorrimento fluido, senza re-rendering eccessivi né un aggiornamento ciclico dello scorrimento.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, react
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.