Определение позиции ползунка прокрутки JS: процент и код

Быстрый ответ

Для определения положения скроллбара в вашем браузере вы можете использовать свойства window.scrollY и window.scrollX, которые отвечают соответственно за вертикальную и горизонтальную прокрутки:

const verticalScroll = window.scrollY; // Сколько прокручено по вертикали
const horizontalScroll = window.scrollX; // Сколько прокручено по горизонтали

Они представляют расстояние в пикселях от верхнего и левого края страницы до текущего положения прокрутки.

Если требуется узнать положение скроллбара для конкретного элемента, ориентируйтесь на свойства element.scrollTop и element.scrollLeft.

Положение скроллбара определённого элемента

Для элементов со встроенным скроллом актуальны свойства scrollTop и scrollLeft, которые определяют положение вертикального и горизонтального скроллбаров:

const element = document.querySelector('.scrollable-element'); // Поиск элемента с прокруткой
const scrollPos = {
  vertical: element.scrollTop, // Прокрутка по вертикали
  horizontal: element.scrollLeft // Прокрутка по горизонтали
};

Если вам важен процент прокрутки, используйте следующий код:

const scrollPercentage = (element.scrollTop / (element.scrollHeight – element.clientHeight)) * 100;

Анализ прокрутки на уровне всего документа

При оценке прокрутки на уровне всего документа могут возникнуть разночтения между браузерами, и здесь могут потребоваться следующие конструкции:

const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

Интерактивные приложения и события прокрутки

Для поддержания реактивности ваших приложений при прокрутке страницы используйте обработчик события scroll:

window.addEventListener('scroll', () => {
  console.log(window.scrollY); // Следим за уровнем прокрутки
});

Воспользуйтесь этим для создания эффекта параллакса, динамической подгрузки контента при прокрутке или появления и исчезновения элементов в зависимости от положения скроллбара.

Мастер API для отслеживания прокрутки – Intersection Observer API

Intersection Observer API – это эффективный инструмент для слежения за изменениями в отображении элементов:

const observer = new Intersection Observer(yourCallbackHere);
observer.observe(document.querySelector('.to-observe'));

Он может облегчить реализацию ленивой подгрузки, бесконечной прокрутки или отображения анимаций.

Визуализация

Смотрите на скроллбар как на индикатор вашего перемещения по виртуальному зданию: каждое смещение его ползунка рассказывает о вашем положении между "этажами" вашего контента.

Тонкости работы с положением прокрутки

Проверка достижения конца прокрутки

Чтобы узнать, достиг ли пользователь конца контента, проведите следующую проверку:

const atBottom = element.scrollHeight – element.scrollTop === element.clientHeight;

Подробнее об этом расскажет наш спикер на видео

Определение видимости скроллбара

Есть способ определить, видим ли скроллбар:

const hasScrollbar = element.scrollHeight > element.clientHeight;

Полезные функции для работы со скроллингом

JavaScript предоставляет удобные методы для навигации:

element.scrollIntoView({ behavior: 'smooth', block: 'start' });

Полезные материалы

1. Window: scrollY property – Web APIs | MDN — Объяснение свойства scrollY.
2. Element: scrollTop property – Web APIs | MDN — Детальное описание scrollTop для элементов.
3. How To Create a Scroll Back To Top Button — Руководство по созданию кнопки "Наверх".
4. The Current State of Styling Scrollbars | CSS-Tricks — Советы по стилизации скроллбаров.
5. document.body.scrollTop Firefox returns 0 : ONLY JS – Stack Overflow — Особенности работы скроллбара в различных браузерах.
6. Check if a user has scrolled to the bottom | Stack Overflow — Метод определения окончания прокрутки.
7. Detect Scrollbar Width with JavaScript – Инструкция по измерению ширины скроллбара.