ampproject / ampproject/amp-react-prototype

Scroll events and component state

Ouverte
#41 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
TBD
Langage dominant
JavaScript
Étoiles
36
Forks
6
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la ligne liée dans src/amp-react-carousel.js et suivez la manière dont onScroll détermine la diapositive actuelle, met à jour l’état du composant et modifie le scrollLeft du conteneur. Évaluez le throttling par rapport à l’événement scrollend proposé ; la tâche est terminée lorsque l’état de la diapositive actuelle reste synchronisé pendant le défilement fluide, sans rendus excessifs ni mise à jour de défilement cyclique.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, react
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.