Vloeiend scrollen in actie met React: een tutorial

Preslav Dobrev2022-10-05 · 11 min read

Vloeiend scrollen in actie met React: een tutorial

React is een open-source JavaScript-bibliotheek die wordt gebruikt voor het bouwen van futuristische website-ontwerpen en het verbeteren van gebruikersinterfaces. Vanwege de robuustheid, flexibiliteit en efficiëntie presteert het beter dan concurrerende front-end bibliotheken en frameworks. React biedt uitstekende functies en opvallende functionaliteiten die aanpassing en dynamische animatie vergemakkelijken.

In de lijst met animatiecollecties helpt vloeiend scrollen in React bij het verhogen van de interactiviteit van web-apps en het stroomlijnen van animaties. Vloeiend scrollen is een functie waarmee gebruikers naar verschillende secties van de pagina kunnen gaan met behulp van een navigatiebalk. Dat betekent dat in plaats van op een knop te drukken en meteen naar een ander deel van een vergelijkbare pagina te worden getrokken, de gebruiker naar een doel wordt geleid via een scroll-animatie.

In deze handleiding zullen we u door de stappen leiden voor het implementeren van vloeiend scrollen met behulp van React.

Laten we beginnen!

Vereisten

Om deze tutorial te volgen, heeft u het volgende nodig:

Git geïnstalleerd op uw systeem.
- Volg de stappen om Git te installeren en configureren op Ubuntu 18.04
De nieuwste versie van Node.js moet zijn ingesteld.
- Gebruik deze tutorial om Node.js te installeren op Ubuntu 18.04

De basisinstallatie: Installeer react-scroll

In deze beginnersvriendelijke handleiding ontwerpen we een eenvoudige applicatie met behulp van react-scroll. Als u vertrouwd bent met de React-basisprincipes en ernaar uitkijkt om uw kennis over react-scroll-functies te verbeteren, raadpleeg dan deze samengevatte stappen.

Installeer eerst react-scroll met het volgende commando:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

Next, import the react-scroll package:

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

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

Voeg daarna de <Link />-component in die zich op een specifieke sectie van de app richt:

<Link to="section1">

1	<Link to="section1">

Laten we verder gaan en een React-applicatie ontwerpen met vloeiend scrollen.

Stap 1: Kloon en voer de React-app uit

In onze handleiding gebruiken we het starter React-project dat een navigatiebalk bovenaan bevat. Daar ziet u vijf unieke <sections> die achter elkaar zijn gerangschikt.

Momenteel zijn de links in de navigatiebalk anker-tags. We moeten deze echter binnenkort bijwerken om vloeiend scrollen mogelijk te maken. Volg de React With Smooth Scrolling-pagina om naar de projectrepository te navigeren. Het is belangrijk om op te merken dat de link voor de start-branch is. De master-branch bevat alle voltooide wijzigingen. Bij het openen van de URL ziet u de repository:

Op de repositorypagina ziet u de groene knop Code. DRUK op de dropdown-pijl:

Als u op de pijl klikt, ziet u de HTTP link:

Ga nu naar uw git-terminal en gebruik het volgende commando om het project te clonen op uw lokale machine:

$ 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

In de map src/Components vindt u een Navbar.js-bestand dat de <Navbar> bevat met nav-items die overeenkomen met vijf unieke <Section>'s die achter elkaar zijn gerangschikt:

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">Sectie 1</li>

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

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

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

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

</ul>

</div>

</nav>

);

}

Navigeer vervolgens naar het App.js bestand in de src map. Daar zul je zien dat de <Navbar> is geplaatst samen met de vijf <Section>s:

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="Sectie 1"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

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

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

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

            <Section
            title="Sectie 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="Sectie 1"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="Sectie 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="Sectie 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="Sectie 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="Sectie 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

Standaard bevat elk <Section>-component een titel en ondertitel.

DRY-principe in actie

Omdat we dummytekst gebruiken voor onze handleiding, voegen we een dummyText.js-bestand toe om tijd te besparen en herhaling te verminderen. Gebruik het nieuw aangemaakte JavaScript-bestand om door te geven aan elk <Section>-element.

Installeer React

Gebruik de volgende opdracht om de app te RUNNEN :

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

cd React-With-Smooth-Scrolling

npm install

npm start

Het runnen van de rpm start je applicatie in ontwikkelingsmodus. Ga naar localhost:3000 en controleer of de app op je systeem draait:

Nu onze app draait, gaan we verder en installeren we react-scroll in de volgende stap.

Stap 2: Installeer en configureer React-Scroll

Eerst moet je de package op Node Package Manager bezoeken om react-scroll te downloaden. Op het moment van schrijven van deze handleiding gebruiken we de meest recente release van react-scroll , 1.8.7. Zorg ervoor dat je de nieuwste versie downloadt, mocht er in de toekomst een update zijn:

RUN de volgende opdracht om react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

Ga daarna naar het Navbar.js-bestand en importeer Link en animateScroll van react-scroll. Voor de eenvoud en het gebruiksgemak houden we animateScroll aan als scroll:

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

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

Werk daarna de nav-items bij om het <Link>-component te gebruiken. Je zult veel eigenschappen zien staan in het <Link> component dat triviaal is voor onze handleiding. Je kunt deze eigenschappen echter verkennen door de documentatiepagina.

Enkele essentiële eigenschappen die je aandacht verdienen:

activeClass – De klasse die wordt gebruikt wanneer een element actief is.
to – Informeert het opgegeven doel waarnaar moet worden gescrold.
- De to functie is cruciaal omdat deze het component vertelt naar welk element moet worden gescrold.
spy: Wijst aan om de Link te selecteren wanneer de scroll zich op de doelpositie bevindt.
smooth: Animeert het scrollen.
offset: Scrolt extra px zoals bijvoorbeeld padding.
- Je kunt ook offset gebruiken om een extra hoeveelheid scrollen te definiëren om bij een individuele <Section>.
duration: Animatie-scrolltijd die een getal of een functie kan zijn.

Hier is een illustratie van de functies die voor elk <Link> component kunnen worden gebruikt. Het enige onderscheidende kenmerk is de to functie, aangezien ze allemaal naar verschillende <Section>s:

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

Overweeg om alle nav-items bij te werken. Nadat alle items succesvol zijn toegevoegd, ga je terug naar de browser om het live vloeiende scrollen te bekijken.

Stap 3: Actieve links stylen

In deze stap gebruiken we CSS eigenschappen om ons codeblok opnieuw te ontwerpen en er stijlvol uit te laten zien. De activeClass functie stelt je in staat om een klasse te definiëren en het <Link> component toe te passen wanneer het to element actief is. Als de <Link> die je gebruikt de weergave van het to element bovenaan de pagina heeft, beschouw de <Link> dan als actief. Klik op de <Link> of scrol handmatig omlaag naar de <Section> om de <Link>.

Laten we dit testen en kijken hoe het werkt. Open de Chrome DevTools en inspecteer de vijfde <Link> zoals hieronder gemarkeerd. Klik op de <Link> of scrol handmatig de <Section> naar het onderste deel van de pagina, en je zult zien dat de actieve klasse wordt toegepast:

Maak als extra stap een actieve klasse aan en onderstreep de link. Voeg vervolgens dit kleine blokje CSS toe in het App.css bestand in de src map:

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

.nav-item > .active {

border-bottom: 1px solid #333;

}

Vernieuw daarna je browser. Scrol een beetje rond en je zult merken dat de opgegeven <Link> nu onderstreept is:

Stap 4: Meer functies toevoegen

Naast de hierboven gebruikte eigenschappen zijn er andere functionaliteiten zoals scrollToTop, scrollToBottom, om er maar een paar te noemen, die je kunt gebruiken. Je kunt deze functies rechtstreeks aanroepen en hun acties expliciet beheren. Wat deze functionaliteiten betreft, brengt het app-logo in een navigatiebalk je natuurlijk naar de bovenkant van de startpagina.

Gebruik de scrollToTop functie om een click-handler toe te voegen aan het nav-logo om de gebruiker terug naar de bovenkant van de pagina te scrollen:

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

scrollToTop = () => {

scroll.scrollToTop();

};

Gebruik de scrollToTop functie om een click-handler toe te voegen aan het nav-logo om de gebruiker naar de onderkant van de pagina te scrollen:

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

scrollToTop = () => {

scroll.scrollToBottom();

};

Terug in de browser kun je nu naar beneden scrollen op de pagina, op het logo in de navigatiebalk klikken en terugkeren naar het bovenste deel van de pagina.

Conclusie

Vloeiend scrollen is een van die functionaliteiten die veel visuele waarde kunnen toevoegen aan een web-app. Het react-scroll pakket stelt je in staat om deze functie te benutten zonder de enorme overhead.

Als volgende stap in je leerervaring kun je een kijkje nemen naar meer React- en JavaScript-tutorials die je kunt vinden op onze blog:

Veel computerplezier!

Preslav Dobrev

Auteur · CloudSigma

Preslav Dobrev is een creatief ontwerper bij CloudSigma, met de nadruk op een consistente bedrijfsidentiteit door middel van traditionele en innovatieve marketingkanalen. Hij is bedreven in het samenvoegen van artistieke visie met strategische marketing om impactvolle merkverhalen te creëren.

Vloeiend scrollen in actie met React: een tutorial

Vereisten

De basisinstallatie: Installeer react-scroll

Stap 1: Kloon en voer de React-app uit

Stap 2: Installeer en configureer React-Scroll

Stap 3: Actieve links stylen

Stap 4: Meer functies toevoegen

Conclusie

Preslav Dobrev

Reacties