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.
Zur Absolvierung dieses Tutorials benötigen Sie Folgendes:
Dieses Tutorial wurde mit Node v13.14.0, npm v6.14.5, react
v16.13.1 und react-scroll
v.1.7.16 verifiziert.
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.
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.
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.
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.
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.
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.