Плавная прокрутка — это когда вместо того, чтобы нажимать на кнопку и сразу же переходить на другую часть той же самой страницы, пользователь переходит туда посредством анимации прокрутки. Это одна из малозаметных особенностей пользовательского интерфейса сайтов, которая однако имеет эстетическое значение.
В этой статье мы будем использовать пакет 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 с плавной прокруткой.
Для удобства в этом обучающем модуле мы будем использовать начальный проект 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
.
Теперь мы установим пакет 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
соответствующим образом. Добавив их, вы должны получить возможность вернуться в браузер (приложение должно было автоматически перезапуститься) и посмотреть на плавную прокрутку в действии.
Свойство activeClass
позволяет определить класс для применения к компоненту <Link>
, когда его элемент to
активен. Компонент <Link>
считается активным, если его элемент to
находится в поле зрения вблизи верхней части страницы. Его можно активировать, нажав на сам компонент <Link>
или прокрутив страницу вниз до раздела <Section>
вручную.
Чтобы доказать это, мы открываем инструменты Chrome DevTools и изучаем пятый компонент <Link>
, как показано ниже. Когда мы нажимаем на этот компонент <Link>
или вручную прокручиваем страницу до конца, то замечаем применение активного класса.
Чтобы использовать это, вы можете создать активный класс и добавить подчеркивание к ссылке. Вы можете добавить этот небольшой блок кода CSS в файл App.css
в каталоге src
:
.nav-item > .active {
border-bottom: 1px solid #333;
}
Теперь, если вы вернетесь в браузер и начнете прокрутку, вы увидите, что соответствующий компонент <Link>
подчеркнут.
Наконец, в этом пакете также содержатся функции, которые можно вызывать напрямую, в том числе scrollToTop
, scrollToBottom
и т. д. Это относится и к различным событиям, которые вы можете обрабатывать.
При ссылке на эти функции, обычно обозначаемые логотипом приложения на панели навигации, пользователь может вернуться на главную страницу или в начало текущей страницы.
Чтобы привести простой пример вызова одной из этих функций, мы добавляем в nav-logo
обработчик нажатий, чтобы выполнять прокрутку в начало страницы, как показано здесь:
scrollToTop = () => {
scroll.scrollToTop();
};
Вернувшись в браузер, вы должны иметь возможность прокручивать страницу до конца, нажимать логотип на панели навигации и возвращаться в начало страницы.
Плавная прокрутка — это одна из возможностей, существенно повышающих эстетическую ценность вашего приложения. Пакет react-scroll
позволяет использовать эту возможность без существенных издержек.
В этом учебном модуле мы добавили в приложение плавную прокрутку и поэкспериментировали с разными настройками. Если вам интересно, уделите немного времени и изучите другие функции и события, предлагаемые этим пакетом.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.