Legen Sie die Scroll-Position in React fest

Heutzutage neigen Webanwendungen dazu, viele Inhalte anzuzeigen. Benutzer sind oft gezwungen, durch die gesamte Seite zu scrollen, um zu finden, wonach sie suchen.

Dies ist eine schlechte Benutzererfahrung. Die Lösung besteht darin, Schaltflächen zu erstellen, mit denen Benutzer zu einem bestimmten Seitenabschnitt springen können, ohne scrollen zu müssen.

In diesem Artikel erfahren Sie, wie Sie in React eine feste Bildlaufposition festlegen.

Legen Sie die Scroll-Position in React fest

Zuerst müssen wir eine Referenz auf das DOM-Element in einer JavaScript-Variablen speichern. Dafür können wir den useRef()-Hook verwenden, der im Wesentlichen eine Alternative zur getElementById()-Methode in nativem JavaScript ist.

Schauen wir uns ein Beispiel an:

import { useRef } from "react";
export default function App() {
  const welcome = useRef(null);
  const about = useRef(null);
  const terms = useRef(null);

  return (
    <div className="App">
      <h1 ref={welcome}>Welcome to Web Application</h1>
      <h1 ref={about}>About Us</h1>
      <h1 ref={terms}>Terms and Conditions</h1>
    </div>
  );
}

Hier verwenden wir den useRef()-Hook, um ref-Werte zu generieren. Das Argument für den useRef()-Hook ist der Anfangswert von ref.

Der Hook gibt auch eine Referenz zurück, die wir in der Variablen speichern können. Wir speichern die ref-Werte in den Variablen welcome, about und terms.

Innerhalb von JSX setzen wir das Attribut ref von drei Elementen gleich der Variablen, in der wir die ref gespeichert haben. Dies bindet DOM-Elemente wie das Tag <h1> an JavaScript-Variablen.

Dann erstellen wir Event-Handler, die direkt zu diesen Elementen navigieren.

Hinweis: Vergessen Sie nicht, den Verweis auf JavaScript-Variablen in geschweifte Klammern einzuschließen. Sie müssen JavaScript-Ausdrücke (wie einen Verweis auf die Variable) in JSX schreiben.

Als Nächstes erstellen wir einen Event-Handler, der ein Argument akzeptiert – einen ref-Wert – und die Bildlaufposition auf den oberen Rand dieses DOM-Elements setzt.

const setScrollPosition = (ref) => {
  window.scrollTo({
    top: ref.current.offsetTop,
    behavior: 'smooth',
  });
};

Auf diese Weise ist der Ereignishandler wiederverwendbar und kann zum Scrollen zu einem bestimmten Element verwendet werden. Alles, was wir brauchen, um die Bildlaufposition festzulegen, ist, eine bestimmte ref-Variable an Event-Handler zu übergeben.

Dafür verwenden wir die scrollTo()-Methode der window-Schnittstelle, die nativ in JavaScript-Bibliotheken verfügbar ist, einschließlich React.

Wir greifen auf die Eigenschaft current des Werts ref zu, um den oberen Rand des DOM-Elements zu bestimmen. Wir verwenden die scrollTo()-Methode, um den oberen Rand der Scroll-Position auf den oberen Rand des DOM-Elements zu setzen.

Um eine reibungslose Navigation einzustellen, spezifizieren wir auch die Eigenschaft behavior der Methode scrollTo.

Sehen wir uns nun den vollständigen Code für die Komponente an.

import { useRef } from "react";
export default function App() {
  const welcome = useRef(null);
  const about = useRef(null);
  const terms = useRef(null);
  const setScrollPosition = (ref) => {
    window.scrollTo({
      top: ref.current.offsetTop,
      behavior: "smooth"
    });
  };
  return (
    <div className="App">
      <h1 ref={welcome}>Welcome to Web Application</h1>
      <h1 ref={about}>About Us</h1>
      <h1 ref={terms}>Terms and Conditions</h1>
      <div className="buttons">
        <button onClick={() => setScrollPosition(welcome)}>
          Skip to Welcome
        </button>
        <button onClick={() => setScrollPosition(about)}>
          Skip to 'About Us'
        </button>
        <button onClick={() => setScrollPosition(terms)}>Skip to terms</button>
      </div>
    </div>
  );
}

In diesem letzten Code fügen wir eine klebrige Fußzeile mit drei Schaltflächen hinzu. Sie können diese Live-CodeSandBox-Demo öffnen, um zu sehen, wie die Anwendung funktioniert.

Durch Klicken auf eine der Schaltflächen wird die Bildlaufposition auf bestimmte DOM-Elemente fokussiert.

Dies liegt daran, dass wir im Ereignishandler onClick die zuvor definierte Funktion setScrollPosition() aufrufen. Wir liefern ein Argument, eine Variable, die ref-Werte für Elemente speichert, auf die wir den Event-Handler setzen.