Scrollen zu einem Element in React

1. Scrollen zu einem Element mit der Methode Element.scrollIntoView() in React
2. Scrollen zu einem Element mit React Refs (Referenzen)

Das moderne Internet ist mit Texten aller Art gefüllt. Oft müssen Sie scrollen, um zu finden, wonach Sie suchen. Das Scrollen eines endlosen Feeds kann jedoch frustrierend und eine schlechte UX-Praxis sein. Eine Lösung besteht darin, ein Inhaltsverzeichnis zu erstellen.

React-Frameworks bieten eine bessere Möglichkeit, das gleiche Ergebnis zu erzielen. Sie können auf ein Element verweisen und zu ihm scrollen, entweder automatisch oder durch Klicken auf eine Schaltfläche. Wenn Sie erkennen, wonach Benutzer suchen, und diese sofort anzeigen, können Sie die Benutzerfreundlichkeit Ihrer App oder Website erhöhen.

Es gibt mehrere Möglichkeiten, diese Funktion zu implementieren. Je nachdem, welche Art von Komponenten Sie verwenden (Funktional vs. Klasse), müssen Sie die geeignete auswählen.

Dennoch besteht jede Implementierung aus zwei Bits: der Methode Element.scrollIntoView(), die von der HTML-Elementschnittstelle bereitgestellt wird, und React refs (kurz für Referenzen), die entweder mit dem Hook useRef() (für funktionale Komponenten) erstellt werden können, oder Methode createRef() (für Klassenkomponenten).

Scrollen zu einem Element mit der Methode Element.scrollIntoView() in React

Wie bereits erwähnt, stellt diese Methode sicher, dass sich der Bildlauf nach oben oder unten bewegt, um anzuzeigen, welches Element aufgerufen wird.

element.scrollIntoView() kann nur ein Argument akzeptieren. Es kann entweder ein boolesches alignToTop- oder options-Objekt sein.

alignToTop

Die Übergabe eines true booleschen Werts führt dazu, dass das Element am oberen Rand des scrollbaren übergeordneten Elements ausgerichtet wird.

Die Übergabe eines false Werts richtet das Element am unteren Rand des scrollbaren übergeordneten Elements aus.

Options

Dieses Argument wird als Objekt dargestellt, ermöglicht Ihnen jedoch, die Standardeinstellungen der Methode anzupassen und zu ändern.

Das Objekt kann drei optionale Eigenschaften haben. Bei Abwesenheit werden die Einstellungen auf die Standardeinstellungen zurückgesetzt.

1. Mit der Eigenschaft behavior können Sie den Übergang anpassen. Standardmäßig ist es auf auto eingestellt. Es kann auf smooth eingestellt werden, was eine besser aussehende Animation ist.
2. Mit der Eigenschaft block können Sie das Element vertikal positionieren. Es kann den Wert start, center, end oder nearest annehmen. start ist die Standardeinstellung.
3. Mit der Eigenschaft inline können Sie das Element horizontal positionieren. Es kann den Wert von start, center, end oder nearest annehmen. nearest ist die Standardeinstellung.

Browser-Unterstützung

Die Methode element.scrollIntoView() selbst wird von allen gängigen Browsern unterstützt. Einige alte Browser ignorieren jedoch das übergebene Argument options. Laut caniuse.com haben nur ~76% der Nutzer weltweit Browser, die dieses Argument unterstützen. Die Website beschreibt es als experimentelle Funktion.

Scrollen zu einem Element mit React Refs (Referenzen)

Refs in React haben viele verschiedene Anwendungen. Eine der häufigsten Anwendungen ist das Referenzieren von Elementen im DOM. Durch Referenzieren des Elements erhalten Sie auch Zugriff auf die Schnittstelle des Elements. Dies ist wichtig, um das Element zu erfassen, zu dem wir scrollen möchten.

Ein Element kann referenziert werden, indem sein ref-Attribut auf die Referenzinstanz gesetzt wird. Hier ist das Codebeispiel:

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

Hier ist das Element <div> das Element, in das wir scrollen möchten. Sie können auch auf jedes andere HTML-Element React.

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

Die Eigenschaft current des Referenzobjekts enthält das eigentliche Element. Folgendes erhalten wir, wenn wir testDivRef.current in die Konsole einloggen:

Unten ist die vollständige Lösung.

In einer Funktionskomponente:

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>
    </>
  );
}

In einer Klassenkomponente:

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>;
  }
}

Zusätzliche Tipps:

Die Eigenschaft current wird erst zugänglich, nachdem die Komponente gemountet wurde.

Am besten referenzieren Sie die Eigenschaft in einem useEffect()-Callback oder einem Äquivalent (das ist die componentDidMount()-Lebenszyklusmethode für Klassenkomponenten).

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

Sie können auch bedingt prüfen, ob ref.current wahr ist, bevor Sie fortfahren.

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

Sie können festlegen, dass das Scrollen durch Klicken auf eine Schaltfläche ausgelöst wird. Auf diese Weise können Sie sicherstellen, dass das Scrollen ausgeführt wird, sobald die Schaltfläche und die anzuzeigende Komponente montiert sind.

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

eine gebündelte Lösung

NPM-Paket namens react-scroll-to-component wurde speziell entwickelt, um diese Funktion als gebündelte Lösung bereitzustellen. Es ist einfach mit NPM oder Garn zu installieren.

Um mehr über dieses Paket zu erfahren, lesen Sie die Dokumentation.