Плавная прокрутка в действии с использованием React: руководство

Preslav Dobrev2022-10-05 · 10 min read

Плавная прокрутка в действии с использованием React: руководство

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

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

В этом руководстве мы подробно рассмотрим шаги по реализации плавной прокрутки с использованием React.

Давайте начнем!

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

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

Git, установленный в вашей системе.
- Следуйте инструкциям, чтобы установить и настроить Git на Ubuntu 18.04
Должна быть установлена последняя версия Node.js.
- Используйте это руководство, чтобы установить Node.js на Ubuntu 18.04

Базовая настройка: установка react-scroll

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

Сначала установите react-scroll с помощью следующей команды:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

Затем импортируйте пакет react-scroll:

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

После этого вставьте компонент <Link />, который будет указывать на определенный раздел приложения:

<Link to="section1">

1	<Link to="section1">

Давайте двигаться дальше и разработаем приложение React с плавной прокруткой.

Шаг 1: Клонирование и запуск приложения React

В нашем руководстве мы будем использовать стартовый проект React, который включает панель навигации вверху. Там вы увидите пять уникальных <sections>, расположенных последовательно.

В настоящее время ссылки в панели навигации представляют собой теги привязки (anchor tags). Однако вскоре нам нужно будет обновить их, чтобы включить плавную прокрутку. Перейдите на страницу React With Smooth Scrolling, чтобы перейти в репозиторий проекта. Важно отметить, что ссылка ведет на ветку start. Ветка master содержит все выполненные изменения. Открыв URL-адрес, вы увидите репозиторий:

На странице репозитория вы увидите зеленую кнопку Code. НАЖМИТЕ на стрелку раскрывающегося списка:

При нажатии на стрелку вы увидите ссылку HTTP ссылку:

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

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

1	$ 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>
    );
  }
}

import React, { Component } from "react";

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

export default class Navbar extends Component {

render() {

return (

<img

src={logo}

className="nav-logo"

alt="Логотип."

onClick={this.scrollToTop}

<li className="nav-item">Раздел 1</li>

<li className="nav-item">Раздел 2</li>

<li className="nav-item">Раздел 3</li>

<li className="nav-item">Раздел 4</li>

<li className="nav-item">Раздел 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="Раздел 1"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

            <Section
            title="Раздел 2"
            subtitle={dummyText}
            dark={false}
            id="section2"
            />

            <Section
            title="Раздел 3"
            subtitle={dummyText}
            dark={true}
            id="section3"
            />

            <Section
            title="Раздел 4"
            subtitle={dummyText}
            dark={false}
            id="section4"
            />

            <Section
            title="Раздел 5"
            subtitle={dummyText}
            dark={true}
            id="section5"
            />
        </div>
        );
        }
    }
export default App;

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 (

<Section

title="Раздел 1"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="Раздел 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="Раздел 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="Раздел 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="Раздел 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

По умолчанию каждый <Section> компонент будет содержать title и subtitle.

DRY Принцип в действии

Поскольку в нашем руководстве мы используем шаблонный текст, давайте добавим файл dummyText.js, чтобы сэкономить время и избежать повторений. Используйте только что созданный JavaScript файл для передачи в каждый элемент <Section>.

Установка React

Используйте следующую команду для запуска приложения:

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

cd React-With-Smooth-Scrolling

npm install

npm start

Запуск rpm запустит ваше приложение в режиме разработки. Перейдите на localhost:3000 и проверьте работу приложения в вашей системе:

Теперь, когда наше приложение запущено, давайте перейдем к следующему шагу и установим react-scroll на следующем шаге.

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

Сначала вам нужно перейти к пакету в Node Package Manager, чтобы скачать react-scroll . На момент написания этого руководства мы используем последнюю версию react-scroll , 1.8.7. Обязательно установите последнюю версию, если в будущем выйдет обновление:

Выполните следующую команду для установки react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

После этого перейдите в файл Navbar.js и импортируйте Link и animateScroll из react-scroll. Для простоты и удобства давайте импортируем animateScroll как scroll:

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

После этого обновите nav-items, чтобы использовать компонент <Link>. Вы увидите множество свойств, перечисленных в <Link> компонент, который является тривиальным для нашего руководства. Тем не менее, вы можете изучить эти свойства, ознакомившись с страницей документации.

Некоторые важные свойства, заслуживающие вашего внимания:

activeClass – Класс, используемый, когда элемент активен.
to – Указывает целевой элемент, к которому нужно прокрутить.
- Свойство to имеет решающее значение, поскольку оно указывает компоненту, к какому элементу выполнять прокрутку.
spy: Позволяет выбирать Link, когда прокрутка находится в целевой позиции.
smooth: Анимирует прокрутку.
offset: Прокручивает дополнительные px, например, в качестве отступа.
- Вы также можете использовать offset, чтобы определить дополнительное расстояние прокрутки для перехода к конкретному <Section>.
duration: Время анимации прокрутки, которое может быть числом или функцией.

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

<Link
    activeClass="active"
    to="section1"
    spy={true}
    smooth={true}
    offset={-70}
    duration={500}
>

<Link

activeClass="active"

to="section1"

spy={true}

smooth={true}

offset={-70}

duration={500}

Рекомендуется обновить все элементы nav-items. После того как все элементы будут успешно добавлены, вернитесь в браузер и посмотрите на плавную прокрутку в действии.

Step 3: Style Active Links

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

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

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

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

.nav-item > .active {

border-bottom: 1px solid #333;

}

После этого обновите браузер. Прокрутите страницу немного, и вы заметите, что указанный <Link> теперь подчеркнут:

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

В дополнение к свойствам, использованным выше, существуют и другие функции, такие как scrollToTop, scrollToBottom, и это лишь некоторые из них. Вы можете вызывать эти функции напрямую и явно управлять их действиями. Что касается этих функций, естественно, логотип приложения в панели навигации будет возвращать вас в начало главной страницы.

Используя функцию scrollToTop, добавьте обработчик клика на nav-logo, чтобы возвращать пользователя в начало страницы:

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

scrollToTop = () => {

scroll.scrollToTop();

};

Используя функцию scrollToTop, добавьте обработчик клика на nav-logo, чтобы прокручивать страницу для пользователя до самого низа:

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

scrollToTop = () => {

scroll.scrollToBottom();

};

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

Заключение

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

В качестве следующего шага в вашем обучении ознакомьтесь с другими руководствами по React и JavaScript, которые вы можете найти в нашем блоге:

Приятной работы!

Preslav Dobrev

Автор · CloudSigma

Preslav Dobrev — креативный дизайнер в CloudSigma, сосредоточенный на формировании последовательного корпоративного образа с помощью традиционных и инновационных маркетинговых каналов. Он умело сочетает художественное видение со стратегическим маркетингом, создавая убедительные истории бренда.

Плавная прокрутка в действии с использованием React: руководство

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

Базовая настройка: установка react-scroll

Шаг 1: Клонирование и запуск приложения React

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

Step 3: Style Active Links

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

Заключение

Preslav Dobrev

Комментарии