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

Введение

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

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

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

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

• Действующая установка Git. Для настройки ознакомьтесь с учебным модулем «Начало работы с Git».
• Локальная установка Node.js, выполненная согласно указаниям учебного модуля «Установка Node.js и создание локальной среды разработки».

Этот учебный модуль был проверен с 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 содержит все готовые изменения.

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

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

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

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

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

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

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

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

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

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

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

npm install react-scroll

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

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> или вручную прокручиваем страницу до конца, то замечаем применение активного класса.

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

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

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

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

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

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

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

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

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

Заключение

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

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