Реализация плавной прокрутки в 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 содержит все готовые изменения.

Снимок экрана репозитория 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>.

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

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

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

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

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

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

react-scroll package on npm

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

  • 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 позволяет использовать эту возможность без существенных издержек.

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