web-dev-qa-db-fra.com

Gestion des animations de défilement dans React

Quel est le moyen correct de traiter la position du défilement dans React? J'aime beaucoup le défilement en douceur grâce à une meilleure expérience utilisateur. Comme la manipulation du DOM dans React est un anti-motif, je me suis heurté à un problème: comment faire défiler en douceur vers une position/un élément? Je change habituellement la valeur scrollTop d'un élément, mais il s'agit d'une manipulation sur le DOM, qui n'est pas autorisée.

JSBIN

code:

import React from 'react';
import ReactDOM from 'react-dom';


class App extends React.Component {
  handleClick = e => {
    for (let i = 1; i <= 100; i++) {
      setTimeout(() => (this.node.scrollTop = i), i * 2);
    }
  };

  render() {
    const someArrayToMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    return (
      <div ref={node => this.node = node} style={{overflow: 'auto', height: '100vh'}}>
        <button onClick={this.handleClick}>CLICK TO SCROLL</button>
        {
            [...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap].map((e, i) => <div key={i}>some text here</div>)
        }
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

Comment y parvenir de manière React?

javascriptreactjsredux
11
sympi

Vous pouvez simplement utiliser les références et la méthode scrollIntoView (avec behavior: 'smooth' pour un défilement régulier). Ce n'est que quelques lignes de code et ne nécessite pas de package. 

Dites que c'est ce que vous voulez faire défiler

<p ref={this.myRef} className="scrollToHere">[1] ...</p>

Et une sorte de bouton

<button onClick={() => {this.scroll(this.myRef)}} className="footnote">[1]</button>

appeler la méthode de défilement 

class App extends Component {
  constructor() {
    super()
    this.myRef = React.createRef();

  scroll(ref) {
    ref.current.scrollIntoView({behavior: 'smooth'})
  }
}

EDIT: Comme cette méthode n’est pas encore supportée par tous les navigateurs ( aperçu de la prise en charge du navigateur ), vous pouvez utiliser un polyfill . 

8
bbrinx

Il existe plusieurs bibliothèques pour faire défiler les ancres dans React. Le choix dépend des fonctionnalités que vous recherchez et de la configuration existante de votre page.

React Scrollable Anchor est une bibliothèque légère spécialement conçue pour le défilement des ancres mappées sur des hachages d’URL. Il met également à jour le hachage de l'URL en fonction de la section actuellement ciblée. [Divulgation complète: je suis l'auteur de cette bibliothèque]

React Scroll, mentionné dans une autre réponse, est une bibliothèque plus complète pour le défilement des ancres, sans aucune réflexion sur l'emplacement dans l'URL.

Vous pouvez également connecter quelque chose comme React Router Router Link Scroll si vous utilisez déjà React Router, qui sera également lié à votre hachage URL.

1
gabergg

Un couple de bons paquets déjà là qui peut gérer cela pour vous:

https://github.com/fisshy/react-scroll - Démo

https://www.npmjs.com/package/react-scroll-to-component Faites défiler vers le composant

J'espère que cela t'aides!

1
Chase DeAnda

J'apprécie vraiment le site Web de react-router dans la section API, ils semblent utiliser ce composant scrollToDoc qui est une très belle traduction d'une fonction typique de défilement lisse de VanillaJS dans React qui dépend de react-motion !

0
PaulCo

window.scroll({top: 0, left: 0, behavior: 'smooth' }) travaille pour moi.

Vous devez également vérifier la compatibilité du navigateur

Ou utilisez polyfill

0
transang