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