One place for hosting & domains

      Реализация

      Реализация плавной прокрутки в 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:

      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.

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

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

      react-scroll package on npm

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

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

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



      Source link