Implementieren eines sanften Bildlaufs in React

Einführung

Sanfter Bildlauf bedeutet, dass der Benutzer nicht auf eine Schaltfläche klickt und sofort zu einem anderen Teil der (selben) Seite geführt wird, sondern über eine Bildlaufnavigation dorthin navigiert wird. Es ist eine dieser subtilen Funktionen der Benutzeroberfläche auf einer Seite, die einen ästhetischen Unterschied ausmacht.

In diesem Artikel verwenden Sie das Paket react-scroll auf npm zur Implementierung des sanften Bildlaufs.

Voraussetzungen

Zur Absolvierung dieses Tutorials benötigen Sie Folgendes:

• Eine gültige Git-Installation. Um dies einzurichten, lesen Sie das Tutorial Erste Schritte mit Git.
• Lokal installiertes Node.js. Dies können Sie tun, indem Sie dem Tutorial Installieren von Node.js und Erstellen einer lokalen Entwicklungsumgebung folgen.

Dieses Tutorial wurde mit Node v13.14.0, npm v6.14.5, react v16.13.1 und react-scroll v.1.7.16 verifiziert.

Schnellstart: Verwenden von react-scroll

In diesem Tutorial erstellen Sie eine einfache Anwendung. Wenn Sie aber einen schnellen Überblick über die Funktionsweise von react-scroll erhalten möchten, können Sie diese komprimierten Schritte nachschlagen:

Installieren Sie react-scroll:

npm i -S react-scroll

Importieren Sie das Paket react-scroll:

import { Link, animateScroll as scroll } from "react-scroll";

Fügen Sie die Link-Komponente hinzu. Die Komponente <Link />verweist auf einen bestimmten Bereich Ihrer Anwendung:

<Link to="section1">

Sehen wir uns dies genauer an und erstellen eine kleine React-Anwendung mit sanftem Bildlauf.

Schritt 1 — Installieren und Ausführen einer React-Anwendung

Der Einfachheit halber verwendet dieses Tutorial ein React-Startprojekt (unter Verwendung von Create React App 2.0), das eine Navigationsleiste (oder navbar) am oberen Rand sowie fünf verschiedene Inhaltsbereiche aufweist.

Die Links in der Navigationsleiste sind an dieser Stelle nur Anker-Tags. Sie werden Sie jedoch in Kürze aktualisieren, um einen sanften Bildlauf zu ermöglichen.

Sie finden das Projekt unter React With Smooth Scrolling. Bitte beachten Sie, dass dieser Link für den Start-Zweig ist. Der Haupt-Zweig enthält alle abgeschlossenen Änderungen.

Um das Projekt zu klonen, können Sie den folgenden Befehl verwenden:

git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

Wenn Sie sich das Verzeichnis src/Components ansehen, finden Sie eine Datei Navbar.js, die die <Navbar> mit nav-items enthält, die fünf verschiedene <Section>s entsprechen.

import React, { Component } from "react";
import logo from "../logo.svg";

export default class Navbar extends Component {
  render() {
    return (
      <nav className="nav" id="navbar">
        <div className="nav-content">
          <img
            src={logo}
            className="nav-logo"
            alt="Logo."
            onClick={this.scrollToTop}
          />
          <ul className="nav-items">
            <li className="nav-item">Section 1</li>
            <li className="nav-item">Section 2</li>
            <li className="nav-item">Section 3</li>
            <li className="nav-item">Section 4</li>
            <li className="nav-item">Section 5</li>
          </ul>
        </div>
      </nav>
    );
  }
}

Wenn Sie dann die Datei App.js im Verzeichnis src öffnen, sehen Sie, wo die <Navbar> zusammen mit den fünf tatsächlichen <Section>s enthalten ist.

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Navbar from "./Components/Navbar";
import Section from "./Components/Section";
import dummyText from "./DummyText";
class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar />
        <Section
          title="Section 1"
          subtitle={dummyText}
          dark={true}
          id="section1"
        />
        <Section
          title="Section 2"
          subtitle={dummyText}
          dark={false}
          id="section2"
        />
        <Section
          title="Section 3"
          subtitle={dummyText}
          dark={true}
          id="section3"
        />
        <Section
          title="Section 4"
          subtitle={dummyText}
          dark={false}
          id="section4"
        />
        <Section
          title="Section 5"
          subtitle={dummyText}
          dark={true}
          id="section5"
        />
      </div>
    );
  }
}

export default App;

Jede Komponente <Section> nimmt einen title und einen subtitle auf.

Da in diesem Projekt in den verschiedenen Abschnitten Dummytext verwendet wird, wurde dieser Text zur Reduzierung von sich wiederholendem Code einer Datei DummyText.js hinzugefügt, importiert und an jede Komponente <Section> übergeben.

Um die Anwendung auszuführen, können Sie die folgenden Befehle verwenden.

cd React-With-Smooth-Scrolling
npm install
npm start

Dadurch wird die Anwendung im Entwicklungsmodus gestartet und automatisch aktualisiert, wenn Sie eine Ihrer Dateien speichern. Sie können sie im Browser unter localhost:3000 anzeigen.

Schritt 2 — Installieren und Konfigurieren von React-Scroll

Jetzt ist es an der Zeit, das Paket react-scroll zu installieren und diese Funktionalität hinzuzufügen. Informationen zu dem Paket finden Sie auf npm.

Um das Paket zu installieren, führen Sie den folgenden Befehl aus:

npm install react-scroll

Öffnen Sie als Nächstes die Sicherungskopie der Datei Navbar.js und fügen Sie einen import für zwei benannte Importe, Link und animateScroll hinzu.

import { Link, animateScroll as scroll } from "react-scroll";

Beachten Sie, dass ich animatedScroll zur einfacheren Verwendung zu scroll aliasiert habe.

Nachdem alle Ihre Importe definiert sind, können Sie nun Ihre nav-items aktualisieren, um die Komponente <Link> zu verwenden. Diese Komponente nimmt mehrere Eigenschaften an. Sie können auf der Dokumentationsseite über alle diese Eigenschaften nachlesen.

Achten Sie vorerst besonders auf activeClass, to, spy, smooth, offset und duration.

• activeClass - die Klasse, die bei Erreichen des Elements angewendet wird.
• to - das Ziel, zu dem geblättert werden soll.
• spy - um Link auszuwählen, wenn sich scoll an der Position des Ziels befindet.
• smooth - um den Bildlauf zu animieren.
• offset - um zusätzliche px zu scrollen (wie Padding).
• duration - die Zeit der Bildlaufanimation. Dies kann eine Zahl oder eine Funktion sein.

Die Eigenschaft to ist der wichtigste Teil, da sie der Komponente mitteilt, zu welchem Element gescrollt werden soll. In diesem Fall ist dies jede Ihrer <Section>s.

Mit der Eigenschaft offset können Sie eine zusätzliche Anzahl von Bildläufen definieren, um zu jeder <Section> zu gelangen.

Hier ist ein Beispiel für die Eigenschaften, die Sie für jede Komponente <Link> verwenden werden. Der einzige Unterschied zwischen ihnen ist die Eigenschaft to, da sie jeweils auf eine andere <Section> verweist.

<Link
    activeClass="active"
    to="section1"
    spy={true}
    smooth={true}
    offset={-70}
    duration={500}
>

Sie müssen jedes der nav-items entsprechend aktualisieren. Wenn Sie diese hinzugefügt haben, sollten Sie in der Lage sein, zu Ihrem Browser zurückzukehren (Ihre Anwendung sollte bereits automatisch neu gestartet worden sein) und einen sanften Bildlauf zu sehen.

Schritt 3 — Gestaltung von aktiven Links

Die Eigenschaft activeClass ermöglicht es Ihnen, eine Klasse zu definieren, die auf die Komponente <Link> angewendet wird, wenn ihr Element to aktiv ist. Ein <Link> wird als aktiv betrachtet, wenn sein Element to in der Nähe des oberen Seitenrandes sichtbar ist. Dies kann durch Klicken auf den <Link> selbst oder durch manuelles herunterscrollen zu <Section> ausgelöst werden.

Um dies zu beweisen, öffnete ich die Chrome DevTools und inspizierte den fünften <Link>, wie nachfolgend gezeigt. Als ich auf diesen <Link> klickte oder manuell bis um Ende der Seite scrollte, bemerkte ich, dass die aktive Klasse tatsächlich angewendet wird.

Um dies auszunutzen, können Sie eine aktive Klasse erstellen und dem Link eine Unterstreichung hinzufügen. Sie können dieses Stück CSS zu der Datei App.css im Verzeichnis src hinzufügen:

.nav-item > .active {
    border-bottom: 1px solid #333;
}

Wenn Sie nun zu Ihrem Browser zurückkehren und um ein wenig herumscrollen, sollten Sie sehen, dass der entsprechende <Link> unterstrichen ist.

Schritt 4 — Hinzufügen zusätzlicher Funktionen

Für einen letzten Teil des Inhalts bietet dieses Paket auch einige Funktionen, die direkt aufgerufen werden können, wie scrollToTop, scrollToBottom, usw., sowie verschiedene Ereignisse, die Sie handhaben können.

In Bezug auf diese Funktionen führt das Anwendungslogo in einer Navigationsleiste den Benutzer zu der Startseite oder zum Anfang der aktuellen Seite.

Als einfaches Beispiel dafür, wie eine dieser bereitgestellten Funktionen aufgerufen wird, habe ich dem nav-logo einen Click-Handler hinzugefügt, den den Benutzer wie folgt zu zum Anfang der Seite scrollt:

scrollToTop = () => {
    scroll.scrollToTop();
};

Zurück im Browser sollten Sie in der Lage sein, auf der Seite nach unten zu scrollen, auf das Logo in der Navigationsleiste zu klicken und wieder an den Anfang der Seite zurückgeleitet zu werden.

Zusammenfassung

Der sanfte Bildlauf ist eine dieser Funktionen, die Ihrer Anwendung einen hohen ästhetischen Wert verleihen können. Das Paket react-scroll ermöglicht Ihnen, diese Funktion ohne nennenswerten Overhead zu nutzen.

In diesem Tutorial haben Sie einer Anwendung einen sanften Bildlauf hinzugefügt und mit verschiedenen Einstellungen experimentiert. Wenn Sie neugierig geworden sind, verbringen Sie etwas Zeit damit, die anderen Funktionen und Ereignisse zu erkunden, die dieses Paket zu bieten hat.