ЗНАНИЕ НАПРАВЛЕНИЯ ПРОКРУТКИ, ОСОБЕННО ПО оси Y, очень важно для сети. Это важно для аналитики — знать, что делают клиенты, когда прокручивают страницу. Это вдвойне важно для интерфейса. Многие веб-страницы что-то делают, когда пользователь прокручивает страницу по вертикали (например, липкая навигация). Вот почему мы сделали javascript-плагин с нулевой зависимостью под названием Scrolldir. Посмотреть демо-страницу можно здесь.

Элементы пользовательского интерфейса, которые нуждаются в вертикальной прокрутке:

  • Скрытые навигации
  • Социальные элементы, которые перемещаются или изменяются при прокрутке веб-страницы
  • Навигационные кнопки или ссылки

Существует множество способов, с помощью которых веб-страницы используют вертикальное направление прокрутки, чтобы предоставить клиентам лучший опыт!

Несмотря на то, что вертикальное направление прокрутки так широко используется в Интернете, часто его можно значительно улучшить. Нередко можно увидеть веб-страницу, на которой элементы навигации дрожат при вертикальной прокрутке веб-страницы, что становится еще хуже для мобильных устройств. Есть ряд причин такого дрожания, и Scrolldir отлично решает некоторые из этих проблем!

Что отличает ScrollDir?

Scrolldir отличается от других плагинов направления прокрутки по нескольким причинам.

Сравнение в качестве плагина JavaScript:

  • Это очень просто — управляется только направление прокрутки вверх или вниз.
  • Он не требует других библиотек и может потребоваться при необходимости в вашем веб-проекте, что делает его актуальным с практиками кода 2017 года.
  • Из-за того, как это написано, часть кода может быть встряхнута деревом, если это необходимо.

Сравнение с JavaScript-плагином Scroll Direction:

  • Он хранит историю направления прокрутки веб-страницы, чтобы избежать дрожания — подумайте, когда вы случайно прокручиваете немного вверх, и вас прерывает что-то, что появляется или всплывает на странице.
  • Он сохраняет максимум 32 тика прокрутки в своей истории или 512 мс, поэтому он не ограничивает память.

Scrolldir помогает обеспечить удобные функции взаимодействия с клиентами, которые происходят во время прокрутки, а также для бизнес-аналитики.

Scrolldir из Scroll Intent

Scrolldir — это сокращение от Направление прокрутки. Его номенклатура проистекает из того, что он краткий и прямой, как и сам плагин. Патрик Фишер написал ядро ​​Scrolldir. Он написал его как плагин jQuery, изначально называвшийся Scroll Intent.

Использование папки прокрутки

Scrolldir очень прост в использовании!

Установить

npm install scrollDir --save-dev
# or
yarn add scrolldir --save

Настраивать

Добавьте dist/scrolldir.min.js в свою сборку.

использование

scrollDir();

По умолчанию ScrollDir устанавливает для атрибута data-scrolldir элемента <html> значение вверх или вниз:

<html data-scrolldir="up">

or

<html data-scrolldir="down">

Теперь легко изменить стиль для вертикального направления прокрутки!

[data-scrolldir="down"] .my-fixed-header { display: none; }

Резюме

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