Smooth Scrolling in Aktion mit React: Ein Tutorial

Preslav Dobrev2022-10-05 · 11 min read

Smooth Scrolling in Aktion mit React: Ein Tutorial

React ist eine Open-Source-JavaScript-Bibliothek, die für die Erstellung zukunftsweisender Website-Designs und die Verbesserung von Benutzeroberflächen verwendet wird. Aufgrund ihrer Robustheit, Flexibilität und Effizienz hat sie ihre konkurrierenden Front-End-Bibliotheken und -Frameworks übertroffen. React bietet hervorragende Funktionen und herausragende Funktionalitäten, die die Anpassung und dynamische Animation erleichtern.

In der Liste der Animationssammlungen hilft das reibungslose Scrollen (Smooth Scrolling) in React dabei, die Interaktivität von Web-Apps zu erhöhen und Animationen zu optimieren. Smooth Scrolling ist eine Funktion, die es Benutzern ermöglicht, mithilfe einer Navigationsleiste zu verschiedenen Abschnitten der Seite zu gelangen. Das bedeutet, dass der Benutzer nicht auf eine Schaltfläche klickt und sofort zu einem anderen Abschnitt derselben Seite springt, sondern durch eine Scroll-Animation zum Ziel geführt wird.

In dieser Anleitung werden wir Sie durch die Schritte zur Implementierung von Smooth Scrolling mit React führen.

Fangen wir an!

Voraussetzungen

Um diesem Tutorial zu folgen, benötigen Sie Folgendes:

Git auf Ihrem System installiert.
- Folgen Sie den Schritten, um Git auf Ubuntu 18.04 zu installieren und zu konfigurieren
Die neueste Version von Node.js muss eingerichtet sein.
- Nutzen Sie dieses Tutorial, um Node.js auf Ubuntu 18.04 zu installieren

Das Basis-Setup: react-scroll installieren

In dieser einsteigerfreundlichen Anleitung entwerfen wir eine einfache Anwendung mit react-scroll. Wenn Sie mit den React-Grundlagen vertraut sind und darauf brennen, Ihr Wissen über react-scroll-Funktionen zu erweitern, lesen Sie diese zusammengefassten Schritte.

Installieren Sie zuerst react-scroll mit dem folgenden Befehl:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

Importieren Sie als Nächstes das react-scroll-Paket:

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

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

Fügen Sie danach die Komponente <Link /> ein, die auf einen bestimmten Abschnitt der App verweist:

<Link to="section1">

1	<Link to="section1">

Gehen wir weiter und entwerfen eine React-Anwendung mit Smooth Scrolling.

Schritt 1: Klonen und Ausführen der React-App

In unserer Anleitung verwenden wir das React-Starterprojekt, das eine Navigationsleiste am oberen Rand enthält. Dort sehen Sie fünf einzigartige, <sections> nacheinander angeordnete Abschnitte.

Derzeit sind die Links in der Navigationsleiste Anchor-Tags. Wir müssen sie jedoch in Kürze aktualisieren, um Smooth Scrolling zu aktivieren. Folgen Sie der Seite React With Smooth Scrolling, um zum Projekt-Repository zu gelangen. Es ist wichtig zu beachten, dass der Link für den start-Branch ist. Der master-Branch enthält alle abgeschlossenen Änderungen. Wenn Sie die URL öffnen, sehen Sie das Repository:

Auf der Repository-Seite sehen Sie die grüne Schaltfläche Code. KLICKEN Sie auf den Dropdown-Pfeil:

Wenn Sie auf den Pfeil klicken, sehen Sie den HTTP -Link:

Gehen Sie nun zu Ihrem git-Terminal und verwenden Sie den folgenden Befehl, um das Projekt auf Ihrem lokalen Rechner zu klonen:

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

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

Im Verzeichnis src/Components finden Sie eine Navbar.js-Datei, die die <Navbar> mit nav-items enthält, die fünf einzigartigen, nacheinander angeordneten <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>
    );
  }
}

import React, { Component } from "react";

import logo from "../logo.svg";

export default class Navbar extends Component {

render() {

return (

<img

src={logo}

className="nav-logo"

alt="Logo."

onClick={this.scrollToTop}

<li className="nav-item">Abschnitt 1</li>

<li className="nav-item">Abschnitt 2</li>

<li className="nav-item">Abschnitt 3</li>

<li className="nav-item">Abschnitt 4</li>

<li className="nav-item">Abschnitt 5</li>

</ul>

</div>

</nav>

);

}

Navigieren Sie als Nächstes zur App.js-Datei im src-Verzeichnis. Dort werden Sie sehen, dass die <Navbar> zusammen mit den fünf <Section>s platziert 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="Abschnitt 1"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

            <Section
            title="Abschnitt 2"
            subtitle={dummyText}
            dark={false}
            id="section2"
            />

            <Section
            title="Abschnitt 3"
            subtitle={dummyText}
            dark={true}
            id="section3"
            />

            <Section
            title="Abschnitt 4"
            subtitle={dummyText}
            dark={false}
            id="section4"
            />

            <Section
            title="Abschnitt 5"
            subtitle={dummyText}
            dark={true}
            id="section5"
            />
        </div>
        );
        }
    }
export default App;

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 (

<Section

title="Abschnitt 1"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="Sektion 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="Sektion 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="Sektion 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="Sektion 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

Standardmäßig enthält jede <Section>-Komponente einen title und subtitle.

DRY-Prinzip in Aktion

Da wir für unser Tutorial Blindtext verwenden, fügen wir eine dummyText.js-Datei hinzu, um Zeit zu sparen und Wiederholungen zu reduzieren. Verwenden Sie die neu erstellte JavaScript-Datei, um sie an jedes <Section>-Element zu übergeben.

React installieren

Verwenden Sie den folgenden Befehl, um die App auszuführen:

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

cd React-With-Smooth-Scrolling

npm install

npm start

Das Ausführen von rpm startet Ihre Anwendung im Entwicklungsmodus. Rufen Sie localhost:3000 auf und überprüfen Sie, ob die App auf Ihrem System läuft:

Da unsere App nun läuft, fahren wir fort und installieren react-scroll im nächsten Schritt.

Schritt 2: Installieren und Konfigurieren von React-Scroll

Zuerst müssen Sie das Paket im Node Package Manager besuchen, um react-scroll herunterzuladen. Zum Zeitpunkt der Erstellung dieses Leitfadens verwenden wir die neueste Version von react-scroll , 1.8.7. Stellen Sie sicher, dass Sie die neueste Version erhalten, falls es in Zukunft ein Update gibt:

Führen Sie den folgenden Befehl aus, um react-scroll:

 zu installieren:
$ npm install react-scroll

1	$ npm install react-scroll

Gehen Sie danach zur Navbar.js-Datei und importieren Sie Link und animateScroll aus react-scroll. Der Einfachheit halber behalten wir animateScroll als scroll bei:

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

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

Aktualisieren Sie danach die Navigations-elemente, um die <Link>-Komponente zu verwenden. Sie werden viele in der <Link> aufgelisteten Eigenschaften sehen.-Komponente, die für unser Tutorial nebensächlich ist. Sie können diese Eigenschaften jedoch untersuchen, indem Sie die Dokumentationsseite.

Einige wesentliche Eigenschaften, die Ihre Aufmerksamkeit verdienen:

activeClass – Die Klasse, die verwendet wird, wenn ein Element aktiv ist.
to – Informiert das angegebene Ziel, zu dem gescrollt werden soll.
- Die to-Funktion ist entscheidend, da sie der Komponente mitteilt, zu welchem Element gescrollt werden soll.
spy: Sorgt dafür, dass die Link-Komponente ausgewählt wird, wenn sich der Scrollbalken an der Zielposition befindet.
smooth: Animiert das Scrollen.
offset: Scrollt zusätzliche px, wie zum Beispiel ein Padding.
- Sie können auch offset verwenden, um einen zusätzlichen Scroll-Abstand zu definieren, um zu einer einzelnen <Section>.
duration: Animations-Scrollzeit, die eine Zahl oder eine Funktion sein kann.

Hier ist eine Veranschaulichung der Funktionen, die für jede <Link>-Komponente verwendet werden können. Das einzige Unterscheidungsmerkmal zwischen ihnen ist die to-Funktion, da sie alle auf verschiedene <Section>s verweisen:

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

<Link

activeClass="active"

to="section1"

spy={true}

smooth={true}

offset={-70}

duration={500}

Erwägen Sie, alle nav--Elemente zu aktualisieren. Nachdem alle Elemente erfolgreich hinzugefügt wurden, kehren Sie zum Browser zurück und sehen Sie sich das reibungslose Scrollen live an.

Schritt 3: Aktive Links stylen

In diesem Schritt verwenden wir CSS-Eigenschaften, um unseren Codeblock neu zu gestalten und ihn stilvoll aussehen zu lassen. Die activeClass-Funktion ermöglicht es Ihnen, eine Klasse zu definieren und auf die <Link>-Komponente anzuwenden, wenn das to-Element aktiv ist. Wenn der <Link>, den Sie verwenden, das to-Element oben auf der Seite anzeigt, betrachten Sie den <Link> als aktiv. Klicken Sie auf den <Link> oder scrollen Sie manuell zur <Section> herunter, um den <Link>.

auszulösen. Lassen Sie uns das testen und sehen, wie es funktioniert. Öffnen Sie die Chrome DevTools und untersuchen Sie den fünften <Link>, wie unten hervorgehoben. Klicken Sie auf den <Link> oder scrollen Sie die <Section> manuell in den unteren Teil der Seite, und Sie werden sehen, dass die aktive Klasse angewendet wird:

Erstellen Sie als zusätzlichen Schritt eine aktive Klasse und unterstreichen Sie den Link. Fügen Sie dann diesen kleinen Block von CSS in der App.css-Datei im src-Verzeichnis hinzu:

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

.nav-item > .active {

border-bottom: 1px solid #333;

}

Aktualisieren Sie danach Ihren Browser. Scrollen Sie ein wenig herum und Sie werden feststellen, dass der angegebene <Link> jetzt unterstrichen ist:

Schritt 4: Weitere Funktionen hinzufügen

Zusätzlich zu den oben verwendeten Eigenschaften gibt es weitere Funktionalitäten wie scrollToTop, scrollToBottom, um nur einige zu nennen, die Sie verwenden können. Sie können diese Funktionen direkt aufrufen und ihre Aktionen explizit verwalten. In Bezug auf diese Funktionalitäten führt Sie das App-Logo in einer Navigationsleiste natürlich an den Anfang der Startseite.

Verwenden Sie die scrollToTop-Funktion, um einen Klick-Handler zum nav-logo hinzuzufügen, um den Benutzer zurück an den Anfang der Seite zu scrollen:

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

scrollToTop = () => {

scroll.scrollToTop();

};

Verwenden Sie die scrollToTop-Funktion, um einen Klick-Handler zum nav-logo hinzuzufügen, um den Benutzer an das Ende der Seite zu scrollen:

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

scrollToTop = () => {

scroll.scrollToBottom();

};

Zurück im Browser können Sie nun auf der Seite nach unten scrollen, auf das Logo in der Navigationsleiste klicken und werden zum oberen Teil der Seite zurückgebracht.

Fazit

Reibungsloses Scrollen gehört zu den Funktionalitäten, die einer Web-App viel visuellen Wert verleihen können. Das react-scroll-Paket ermöglicht es Ihnen, diese Funktion ohne den enormen Overhead zu nutzen.

Als nächsten Schritt in Ihrer Lernerfahrung werfen Sie einen Blick auf weitere React- und JavaScript-Tutorials, die Sie auf unserem Blog finden:

Viel Spaß beim Programmieren!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev ist ein kreativer Designer bei CloudSigma und konzentriert sich auf eine konsistente Unternehmensidentität durch traditionelle und innovative Marketingkanäle. Er versteht es meisterhaft, künstlerische Vision mit strategischem Marketing zu verbinden, um wirkungsvolle Markengeschichten zu schaffen.

Smooth Scrolling in Aktion mit React: Ein Tutorial

Voraussetzungen

Das Basis-Setup: react-scroll installieren

Schritt 1: Klonen und Ausführen der React-App

Schritt 2: Installieren und Konfigurieren von React-Scroll

Schritt 3: Aktive Links stylen

Schritt 4: Weitere Funktionen hinzufügen

Fazit

Preslav Dobrev

Kommentare