Scroll Father — это лёгкая и многофункциональная библиотека на JavaScript/TypeScript, предоставляющая набор полезных функций для работы со скроллом в веб-приложениях. Она позволяет разработчикам легко интегрировать необходимую функциональность, импортируя только нужные функции, что способствует оптимизации загрузки и повышению производительности.
- Модульность: Импортируйте только те функции, которые вам необходимы.
- Богатый функционал: Функции для определения направления скролла, плавной прокрутки, отслеживания элементов на странице и многое другое.
- Высокая производительность: Оптимизированный код с минимальным влиянием на размер бандла.
- Поддержка TypeScript: Полные типы для удобной разработки и автодополнения.
- Лёгкость использования: Простые и понятные API для быстрой интеграции.
Установите через npm:
npm i scroll-fatherИли добавьте через CDN:
<script src="https://cdn.jsdelivr.net/npm/scroll-father/dist/ScrollFather.min.js"></script>Вы можете импортировать только те функции, которые вам нужны:
// Импорт отдельных функций
import { trackScrollState, smoothScrollToElement } from 'scroll-father';Или импортировать всё сразу (не стоит так делать):
// Импорт всей библиотеки
import * as ScrollFather from 'scroll-father';Автоматически добавляет атрибут (например, data-scrolled) к указанному элементу при прокрутке страницы.
import { trackScrollState } from 'scroll-father';
trackScrollState({
attribute: 'data-scrolled', // Имя атрибута (по умолчанию 'data-scrolled')
element: document.body, // Элемент для установки атрибута (по умолчанию document.body)
onScrollStart: () => console.log('Скролл начался!'),
onScrollReset: () => console.log('Скролл сброшен!'),
});Определяет направление скролла и устанавливает атрибут (data-scroll-direction="up" или "down") на элементе <body>.
import { initScrollDirectionTracking } from 'scroll-father';
initScrollDirectionTracking();Загружает дополнительный контент, когда пользователь достигает конца страницы.
import { initInfiniteScroll } from 'scroll-father';
initInfiniteScroll(
async () => {
// Ваш код для загрузки дополнительного контента
await fetchMoreData();
},
{
threshold: 300, // Пороговое значение в пикселях до конца страницы (по умолчанию 300)
},
);Добавляет обработчик прокрутки с дебаунсом, гарантируя, что переданный колбэк будет вызываться не чаще, чем с указанной задержкой.
import { debounceScroll } from 'scroll-father';
debounceScroll(() => {
// Ваш код, который будет вызываться при прокрутке с дебаунсом
}, 200); // Задержка в миллисекундах перед вызовом функции (по умолчанию 200)Инициализирует отслеживание элемента с помощью IntersectionObserver. Вызывает функции при появлении или исчезновении
элемента из области просмотра.
import { initIntersectionSection } from 'scroll-father';
const $section = document.querySelector('#my-section');
initIntersectionSection(
$section,
() => {
// Функция вызывается, когда элемент входит в область видимости
console.log('Элемент появился в области видимости');
},
() => {
// Функция вызывается, когда элемент выходит из области видимости
console.log('Элемент вышел из области видимости');
},
{
rootMargin: '-50% 0px', // Отступы для области видимости (по умолчанию '-50% 0px')
threshold: 0, // Пороговое значение видимости (по умолчанию 0)
},
);Добавляет плавную прокрутку ко всем ссылкам-якорям на странице.
import { smootherAllAnchorLinks } from 'scroll-father';
smootherAllAnchorLinks();-
debounceScroll(callback, delay?) Добавляет обработчик прокрутки с дебаунсом. Колбэк
callbackбудет вызываться не чаще, чем раз вdelayмиллисекунд. -
initInfiniteScroll(loadMoreCallback, options?) Реализует бесконечную прокрутку, вызывая
loadMoreCallback, когда пользователь достигает конца страницы. Параметрoptions.thresholdопределяет, за сколько пикселей до конца страницы следует вызвать колбэк. -
initIntersectionSection($section, onStart, onEnd, options?) Отслеживает элемент
$sectionс помощьюIntersectionObserver. ВызываетonStart, когда элемент появляется в области видимости, иonEnd, когда исчезает. -
initScrollDirectionTracking() Отслеживает направление скролла и устанавливает атрибут
data-scroll-directionна<body>со значениями"up"или"down". -
trackScrollState(options?) Отслеживает состояние скролла страницы и устанавливает атрибут (по умолчанию
data-scrolled) на указанном элементе при прокрутке. -
smootherAllAnchorLinks() Добавляет плавную прокрутку ко всем ссылкам-якорям на странице, обеспечивая более плавный переход к целевым элементам.
Мы приветствуем вклад! Не стесняйтесь отправлять проблемы или пул-реквесты через наш репозиторий на GitHub.
Проект лицензирован под лицензией MIT — см. файл LICENSE для подробностей.