Faites défiler jusqu'à un élément dans React

1. Faites défiler jusqu’à un élément avec la méthode Element.scrollIntoView() dans React
2. Faites défiler jusqu’à un élément avec des références React (références)

L’Internet moderne est rempli de texte de tous types de contenu. Assez souvent, vous devez faire défiler pour trouver ce que vous cherchez. Cependant, le défilement du flux sans fin peut être frustrant et une mauvaise pratique UX. Une solution consiste à créer une table des matières.

Les frameworks React offrent un meilleur moyen d’obtenir le même résultat. Vous pouvez vous référer à un élément et faire défiler jusqu’à celui-ci, soit automatiquement, soit en cliquant sur un bouton. Détecter ce que les utilisateurs recherchent et l’afficher instantanément peut augmenter la convivialité de votre application ou de votre site Web.

Il existe plusieurs façons de mettre en œuvre cette fonctionnalité. Selon le type de composants que vous utilisez (fonctionnel vs classe), vous devez choisir celui qui convient.

Pourtant, chaque implémentation se compose de deux bits : la méthode Element.scrollIntoView() fournie par l’interface d’élément HTML et les références React (abréviation de références), qui peuvent être créées soit à l’aide du crochet useRef() (pour les composants fonctionnels), ou méthode createRef() (pour les composants de classe).

Faites défiler jusqu’à un élément avec la méthode Element.scrollIntoView() dans React

Comme mentionné précédemment, cette méthode garantit que le défilement se déplace vers le haut ou vers le bas pour afficher l’élément auquel il est appelé.

element.scrollIntoView() ne peut accepter qu’un seul argument. Il peut s’agir d’un objet booléen alignToTop ou options.

alignToTop

Le passage d’une valeur booléenne true entraînera l’alignement de l’élément sur le haut de l’élément parent défilant.

Le passage d’une valeur false alignera l’élément au bas de l’élément parent défilant.

Options

Cet argument est représenté comme un objet mais vous permet de personnaliser et de modifier les paramètres par défaut de la méthode.

L’objet peut avoir trois propriétés facultatives. En cas d’absence, les paramètres reviennent à leur valeur par défaut.

1. La propriété behavior vous permet de personnaliser la transition. Par défaut, il est réglé sur auto. Il peut être réglé sur smooth, ce qui est une animation plus belle.
2. La propriété block permet de positionner l’élément verticalement. Il peut prendre la valeur de : start, center, end ou nearest. start est le paramètre par défaut.
3. La propriété inline permet de positionner l’élément horizontalement. Il peut prendre la valeur start, center, end ou nearest. nearest est le paramètre par défaut.

Prise en charge du navigateur

La méthode element.scrollIntoView() elle-même est prise en charge par tous les principaux navigateurs. Cependant, certains anciens navigateurs ignoreront l’argument options qui leur est passé. Selon caniuse.com, seulement environ 76% des utilisateurs dans le monde ont des navigateurs qui prennent en charge cet argument. Le site Web le décrit comme une fonctionnalité expérimentale.

Faites défiler jusqu’à un élément avec des références React (références)

Les références dans React ont de nombreuses applications différentes. L’une des utilisations les plus courantes consiste à référencer des éléments dans le DOM. En référençant l’élément, vous accédez également à l’interface de l’élément. Ceci est essentiel pour capturer l’élément vers lequel nous voulons faire défiler.

Un élément peut être référencé en définissant son attribut ref sur l’instance de référence. Voici l’exemple de code :

const testDivRef = useRef(null);
<div className = 'testDiv' ref = {testDivRef}>< /div>

Ici, l’élément <div> est celui que nous voulons faire défiler dans la vue. Vous pouvez également utiliser des références de réaction sur tout autre élément HTML.

<h1 ref={testDivRef}>Title</h1>

La propriété current de l’objet de référence contient l’élément réel. Voici ce que nous obtenons si nous connectons le testDivRef.current sur la console :

Vous trouverez ci-dessous la solution complète.

Dans un composant fonctionnel :

function TestComponent() {
  const testRef = useRef(null);
  const scrollToElement = () => testRef.current.scrollIntoView();
  // Once the scrollToElement function is run, the scroll will show the element
  return (
    <>
      <div ref={testRef}>Element you want to view</div>
      <button onClick={scrollToElement}>Trigger the scroll</button>
    </>
  );
}

Dans un composant de classe :

class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.testRef = React.createRef();
  }
  scrollToElement = () => this.testRef.current.scrollIntoView();
  // Once the scrollToElement method is run, the scroll will show the element
  render() {
    return <div ref = {this.testRef}>Element you want in view < /div>;
  }
}

Conseils supplémentaires :

La propriété current ne deviendra accessible qu’une fois le composant monté.

Il est préférable de référencer la propriété dans un rappel useEffect() ou équivalent (qui est la méthode de cycle de vie componentDidMount() pour les composants de classe).

useEffect(() => console.log(testRef.current), [])

Vous pouvez également vérifier de manière conditionnelle si ref.current équivaut à vrai avant de continuer.

if (testRef.current) {
  testRef.current.scrollIntoView()
}

Vous pouvez configurer le défilement à déclencher en cliquant sur un bouton. De cette façon, vous pouvez vous assurer que le défilement sera exécuté une fois le bouton et le composant à visualiser montés.

<button onClick={scrollToElement}>Trigger the scroll</button>

une solution groupée

Le package NPM appelé react-scroll-to-component a été spécialement conçu pour fournir cette fonctionnalité en tant que solution groupée. Il est facile à installer avec npm ou fil.

Pour en savoir plus sur ce package, lisez la documentation.