От автора: плавная прокрутка, не знаете, что это такое? Ну, вместо того, чтобы нажимать на кнопку и мгновенно перемещаться на другую часть (той же) страницы, пользователь перемещается туда с помощью анимации. Прокрутка в React – это одна из тех тонких особенностей сайта, которая создает невероятную разницу в плане эстетики. Я лично только что реализовал это на одном из своих сайтов, потому что мне нравится опыт, который это предоставляет пользователю.
Тем не менее, хотя плавная прокрутка — это незначительное изменение, реализовать ее может быть довольно сложно. Поэтому в этой статье мы используем пакет react-scroll на NPM.
Использование react-scroll
В этом руководстве мы создадим простое приложение, но если вы хотите быстро узнать, как работает react-scroll. Установите react-scroll
npm i -S react-scroll
Импортируйте пакет react-scroll
import { Link, animateScroll as scroll } from "react-scroll";Добавьте компонент Link. Компонент <Link/> будет указывать на определенную область вашего приложения.
<Link to="section1">
Давайте рассмотрим этот вопрос немного глубже и создадим небольшое приложение React с плавной прокруткой.
Приступаем к работе
Для удобства я создал стартовый проект React (с помощью Create React App 2.0), в котором есть верхняя панель навигации и пять разных разделов. На этом этапе ссылки в панели навигации — это только теги анкора, но мы вскоре их изменим, чтобы обеспечить плавную прокрутку. Обратите внимание: эта ссылка ведет на стартовую ветку. Мастер включает все готовые изменения.
Чтобы клонировать проект, вы можете использовать следующую команду.
git clone https://github.com/jamesqquick/React-With-Smooth-Scrolling.git
Если вы заглянете в каталог Src-> Components, вы найдете там файл Navbar.js, содержащий панель навигации с элементами навигации, соответствующими 5 различным разделам.
Затем, если вы откроете файл App.js в каталоге Src, вы увидите, что в нем включен Navbar вместе с пятью фактическими разделами.
Каждый компонент раздела принимает заголовок и подзаголовки. Поскольку я просто использую условный текст в разных разделах, я добавил этот текст в файл DummyText.js, импортировал его и передал в каждый компонент Section.
Чтобы запустить приложение, вы можете использовать следующую команду.
npm start
Это запустит приложение в режиме разработки и приложение будет обновляться автоматически при сохранении файлов. Вы можете просмотреть его в браузере по адресу localhost:3000.
Установка и настройка React-Scroll
Итак, пришло время установить пакет react-scroll и реализовать этот функционал. Вы можете найти информацию о пакете на NPM.
Чтобы установить пакет, выполните следующую команду.
npm install react-scroll
Затем откройте файл Navbar.js и добавьте импорт для двух именованных элементов: «Link» и «animateScroll». Обратите внимание, что для удобства использования я задал псевдоним «animatedScroll» для «scroll».
import { Link, animateScroll as scroll } from "react-scroll";Определив все импорты, теперь мы можем обновить элементы навигации, чтобы использовать компонент «Link». Этот компонент содержит несколько свойств. Вы можете прочитать обо всех них на странице документации на NPM, но мы отдельно рассмотрим activeClass, to, spy, smooth, offset и duraction.
activeClass — класс, который применяется при достижении элемента
to-target — цель прокрутки
spy — делает Link выбранной, когда прокрутка находится в целевой позиции
smooth — анимирует прокрутку
offset — дополнительные пиксели прокрутки (например, отступы)
duration — время анимации прокрутки, может быть числом или функцией
Свойство «to» является самой важной частью, поскольку оно указывает компоненту, к какому элементу перемещается. В данном случае это будет каждый из наших разделов.
С помощью свойства «offset» вы можете определить дополнительное расстояние для выполнения прокрутки, чтобы попасть в каждый раздел.
«Duration» довольно понятно, а к «spy» и «activeClass» мы вернемся через минуту. Ниже приведен пример свойств, которые мы будем использовать для каждого компонента Link. Единственное различие между ними будет в свойстве «to», поскольку каждое из них указывает на другой раздел.
<Link activeClass="active" to="section1" spy={true} smooth={true} offset={-70} duration= {500}
>Вам нужно будет обновить каждый из элементов системы навигации соответственно. После этого вы можете вернуться в браузер (ваше приложение должно быть автоматически перезапущено) и увидеть плавную прокрутку в действии!
Стили активных ссылок
Свойство класса active позволяет нам определить класс, который будет применяться к компоненту Link, когда он активен. Ссылка считается активной, если элемент находится в верхней части страницы. Это может быть вызвано кликом самой ссылки или прокруткой вниз до раздела вручную. Чтобы увидеть это, я открыл инструменты разработчика Chrome и проверил пятую ссылку, как показано ниже. Когда я кликаю эту ссылку или прокручиваю страницу вниз, обратите внимание, что на самом деле применяется класс «active».
Чтобы воспользоваться этим, мы можем создать класс active и добавить для ссылки подчеркивание. Вы можете добавить этот фрагмент css в файл App.css в каталоге Src.
.nav-item > .active { border-bottom: 1px solid #333;
}Теперь, если вы вернетесь в браузер и немного прокрутите список вниз, вы увидите, что соответствующая ссылка подчеркнута.
Дополнительные функции
Этот пакет также предоставляет некоторые функции, которые можно вызывать прямо, такие как, «scrollToTop», «scrollToBottom» и т. д., а также различные события, которые вы можете обрабатывать. Например, как правило, логотип приложения в панели навигации ведет пользователя на главную страницу или в верхнюю часть текущей страницы. В качестве простого примера того, как вызвать одну из этих функций, я добавил обработчик кликов для изображения бренда в панели навигации, чтобы вызвать прокрутку обратно в верхнюю часть страницы, следующим образом.
scrollToTop = () => { scroll.scrollToTop(); };Вернувшись в браузер, вы можете прокрутить страницу вниз, кликнуть логотип в панели навигации и вернуться к началу страницы. Если вам интересно, потратьте немного времени на изучение других функций и событий, которые предлагает этот пакет!
Заключение
Как я уже сказал, плавная прокрутка — одна из тех функций, которые могут добавить вашему приложению эстетичности. С помощью пакета react-scroll это довольно просто реализовать, поэтому оно определенно стоит ваших усилий.
Автор: James Quick
Источник: https://scotch.io/
Редакция: Команда webformyself.