Table of Contents

Введение

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

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

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

react illustration for: Предварительные требования

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

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

				
					
&lt;Link to="section1"&gt;

Теперь рассмотрим все подробнее и создадим небольшое приложение 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>.

				
					
[label src/Components/Navbar.js]

import React, { Component } from "react";

import logo from "../logo.svg";



export default class Navbar extends Component {

  render() {

    return (

      &lt;nav className="nav" id="navbar"&gt;

        &lt;div className="nav-content"&gt;

          &lt;img

            src={logo}

            className="nav-logo"

            alt="Logo."

            onClick={this.scrollToTop}

          /&gt;

          &lt;ul className="nav-items"&gt;

            &lt;li className="nav-item"&gt;Section 1&lt;/li&gt;

            &lt;li className="nav-item"&gt;Section 2&lt;/li&gt;

            &lt;li className="nav-item"&gt;Section 3&lt;/li&gt;

            &lt;li className="nav-item"&gt;Section 4&lt;/li&gt;

            &lt;li className="nav-item"&gt;Section 5&lt;/li&gt;

          &lt;/ul&gt;

        &lt;/div&gt;

      &lt;/nav&gt;

    );

  }

}

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

				
					
[label 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 (

      &lt;div className="App"&gt;

        &lt;Navbar /&gt;

        &lt;Section

          title="Section 1"

          subtitle={dummyText}

          dark={true}

          id="section1"

        /&gt;

        &lt;Section

          title="Section 2"

          subtitle={dummyText}

          dark={false}

          id="section2"

        /&gt;

        &lt;Section

          title="Section 3"

          subtitle={dummyText}

          dark={true}

          id="section3"

        /&gt;

        &lt;Section

          title="Section 4"

          subtitle={dummyText}

          dark={false}

          id="section4"

        /&gt;

        &lt;Section

          title="Section 5"

          subtitle={dummyText}

          dark={true}

          id="section5"

        /&gt;

      &lt;/div&gt;

    );

  }

}



export default App;

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

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

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

				
					
cd &lt;^&gt;React-With-Smooth-Scrolling&lt;^&gt;

npm install

npm start

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

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

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

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

				
					
npm install react-scroll

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

				
					
[label 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>:

				
					
&lt;Link

    activeClass="active"

    to="&lt;^&gt;section1&lt;^&gt;"

    spy={true}

    smooth={true}

    offset={-70}

    duration={500}

&gt;

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

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

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

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

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

				
					
[label src/App.css]

.nav-item &gt; .active {

    border-bottom: 1px solid #333;

}

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

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

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

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

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

				
					
[label src/Components/Navbar.js]

scrollToTop = () =&gt; {

    scroll.scrollToTop();

};

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

Заключение

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

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