Tutorial

Реализация плавной прокрутки в React

Published on November 3, 2020
author

James Quick

Русский
Реализация плавной прокрутки в React

Введение

Плавная прокрутка — это когда вместо того, чтобы нажимать на кнопку и сразу же переходить на другую часть той же самой страницы, пользователь переходит туда посредством анимации прокрутки. Это одна из малозаметных особенностей пользовательского интерфейса сайтов, которая однако имеет эстетическое значение.

В этой статье мы будем использовать пакет react-scroll в npm для реализации плавной прокрутки.

Предварительные требования

Для прохождения данного учебного модуля вам потребуется следующее:

Этот учебный модуль был проверен с Node v13.14.0, npm v6.14.5, react v16.13.1 и react-scroll v.1.7.16.

Краткое руководство: использование react-scroll

В этом учебном модуле мы создадим простое приложение, но если вы хотите быстро узнать о том, как работает react-scroll, посмотрите эту краткую процедуру:

Установите react-scroll:

npm i -S react-scroll

Импортируйте пакет react-scroll:

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

Добавьте компонент ссылки. Компонент <Link /> будет указывать на определенную область вашего приложения:

<Link to="section1">

Теперь рассмотрим все подробнее и создадим небольшое приложение React с плавной прокруткой.

Шаг 1 — Установка и запуск приложения React

Для удобства в этом обучающем модуле мы будем использовать начальный проект React (используя Create React App 2.0), имеющий панель навигации (или navbar) сверху, а также пять разных разделов с контентом.

Сейчас ссылки в navbar представляют собой якорные теги, но вскоре мы обновим их для реализации плавной прокрутки.

Вы можете найти этот проект в разделе «React с плавной прокруткой». Обратите внимание, что эта ссылка предназначена для ответвления start. Ответвление master содержит все готовые изменения.

Снимок экрана репозитория GitHub

Чтобы клонировать проект, вы можете использовать следующую команду:

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

Если вы посмотрите каталог src/Components, вы увидите в нем файл Navbar.js, который содержит панель <Navbar> с элементами nav-items, соответствующими пяти разным разделам <Section>.

src/Components/Navbar.js
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>
    );
  }
}

Если вы откроете файл App.js в каталоге src, вы увидите, где <Navbar> добавляется с пятью разделами <Section>.

src/Components/App.js
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;

Каждый компонент <Section> принимает заголовок и подзаголовок, title и subtitle.

Поскольку в разных разделах этого проекта используется фиктивный текст, для сокращения объема повторяющегося кода этот текст был добавлен в файл DummyText.js, импортирован и передан в каждый компонент <Section>.

Вы можете использовать следующие команды для запуска приложения.

  1. cd React-With-Smooth-Scrolling
  2. npm install
  3. npm start

Так приложение будет запущено в режиме разработки, и вы сможете автоматически обновлять приложение при сохранении одного из файлов. Вы можете посмотреть его в браузере, введя в адресную строку адрес localhost:3000.

Снимок экрана приложения в браузере

Шаг 2 — Установка и настройка React-Scroll

Теперь мы установим пакет react-scroll и добавим эту функцию. Вы можете найти информацию для package on npm.

react-scroll package on npm

Для установки пакета выполните следующую команду:

  1. npm install react-scroll

Затем снова откройте файл Navbar.js и добавьте выражения import для двух импортируемых элементов, Link и animateScroll.

src/Components/Navbar.js
import { Link, animateScroll as scroll } from "react-scroll";

Обратите внимание, что мы установили для animatedScroll псевдоним scroll, чтобы сделать использование более удобным.

Определив весь импорт, вы можете обновить элементы навигации nav-items для использования компонента <Link>. Этот компонент принимает определенные свойства. Вы можете прочитать о них все на странице документации.

Пока что стоит обратить особое внимание на activeClass, to, spy, smooth, offset и duration.

  • activeClass — класс, применяемый при достижении элемента.
  • to — цель прокрутки.
  • spy — выделение Link при достижении целевой позиции scroll.
  • smooth — анимация прокрутки.
  • offset — прокрутка дополнительных пикселей (например, оформления).
  • duration — время анимации прокрутки. Это может быть число или функция.

Свойство to является самой важной частью, поскольку оно указывает компоненту, до какого элемента следует выполнять прокрутку. В данном случае это будет каждый из разделов <Section>.

Свойство offset позволяет указать величину дополнительной прокрутки для перехода в каждый раздел <Section>.

Вот пример свойств, которые вы будете использовать для каждого компонента <Link>. Единственное отличие между ними заключается в свойстве to, потому что они все указывают на разные разделы <Section>:

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

Вам нужно будет обновить каждый из элементов nav-items соответствующим образом. Добавив их, вы должны получить возможность вернуться в браузер (приложение должно было автоматически перезапуститься) и посмотреть на плавную прокрутку в действии.

Шаг 3 — Определение стилей активных ссылок

Свойство activeClass позволяет определить класс для применения к компоненту <Link>, когда его элемент to активен. Компонент <Link> считается активным, если его элемент to находится в поле зрения вблизи верхней части страницы. Его можно активировать, нажав на сам компонент <Link> или прокрутив страницу вниз до раздела <Section> вручную.

Чтобы доказать это, мы открываем инструменты Chrome DevTools и изучаем пятый компонент <Link>, как показано ниже. Когда мы нажимаем на этот компонент <Link> или вручную прокручиваем страницу до конца, то замечаем применение активного класса.

Отображение приложения React в браузере

Чтобы использовать это, вы можете создать активный класс и добавить подчеркивание к ссылке. Вы можете добавить этот небольшой блок кода CSS в файл App.css в каталоге src:

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

Теперь, если вы вернетесь в браузер и начнете прокрутку, вы увидите, что соответствующий компонент <Link> подчеркнут.

Обновленное представление приложения React в браузере

Шаг 4 — Добавление дополнительных функций

Наконец, в этом пакете также содержатся функции, которые можно вызывать напрямую, в том числе scrollToTop, scrollToBottom и т. д. Это относится и к различным событиям, которые вы можете обрабатывать.

При ссылке на эти функции, обычно обозначаемые логотипом приложения на панели навигации, пользователь может вернуться на главную страницу или в начало текущей страницы.

Чтобы привести простой пример вызова одной из этих функций, мы добавляем в nav-logo обработчик нажатий, чтобы выполнять прокрутку в начало страницы, как показано здесь:

src/Components/Navbar.js
scrollToTop = () => {
    scroll.scrollToTop();
};

Вернувшись в браузер, вы должны иметь возможность прокручивать страницу до конца, нажимать логотип на панели навигации и возвращаться в начало страницы.

Заключение

Плавная прокрутка — это одна из возможностей, существенно повышающих эстетическую ценность вашего приложения. Пакет react-scroll позволяет использовать эту возможность без существенных издержек.

В этом учебном модуле мы добавили в приложение плавную прокрутку и поэкспериментировали с разными настройками. Если вам интересно, уделите немного времени и изучите другие функции и события, предлагаемые этим пакетом.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
James Quick

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more