ampproject / ampproject/amp-react-prototype
Scroll events and component state
- Vorherrschende Sprache
- JavaScript
- Sterne
- 36
- Forks
- 6
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
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`.
Beitragsleitfaden
Rechercherichtung
Beginne bei der verknüpften Zeile in src/amp-react-carousel.js und verfolge, wie onScroll die aktuelle Folie ermittelt, den Komponentenstatus aktualisiert und scrollLeft des Containers ändert. Bewerte Throttling im Vergleich zum vorgeschlagenen scrollend-Ereignis; abgeschlossen ist die Aufgabe, wenn der Status der aktuellen Folie während des Smooth Scrolling synchron bleibt, ohne übermäßige erneute Renderings oder eine zyklische Scroll-Aktualisierung.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100