Для отслеживания прокрутки страницы вниз на JavaScript есть несколько способов, даже если установлено значение overflow:hidden; для элемента <body>. Давайте разберем некоторые из них.
1. Использование события scroll: В JavaScript есть событие scroll, которое срабатывает каждый раз, когда пользователь прокручивает страницу. Мы можем использовать это событие и свойство window.pageYOffset или document.documentElement.scrollTop (в зависимости от браузера) для получения текущей позиции прокрутки страницы. Вот пример кода:
window.addEventListener('scroll', function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
console.log('Пользователь прокрутил страницу на ' + scrollTop + ' пикселей вниз.');
});
2. Использование Intersection Observer API: Intersection Observer API - это новое API, введенное в JavaScript, которое позволяет разработчикам отслеживать изменения пересечения целевого элемента с родительским или корневым элементом.
var options = {
root: null, // Или указать корневой элемент, если он задан
rootMargin: '0px',
threshold: 1.0 // Полное пересечение целевого элемента с родительским элементом
};
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
console.log('Пользователь прокрутил страницу на ' + entry.boundingClientRect.y + ' пикселей вниз.');
}
});
}, options);
observer.observe(document.querySelector('body'));
3. Использование requestAnimationFrame: Данный подход заключается в использовании функции requestAnimationFrame, которая запускает анимацию в соответствии с кадровой частотой браузера. Мы можем использовать эту функцию для отслеживания изменений текущей позиции прокрутки, а затем проверять, когда произошло перемещение вниз. Вот пример кода:
var lastScrollTop = 0;
function onScroll() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop) {
console.log('Пользователь прокрутил страницу вниз.');
}
lastScrollTop = scrollTop;
requestAnimationFrame(onScroll);
}
onScroll();
Итак, мы рассмотрели несколько способов отслеживания прокрутки страницы вниз на JavaScript, даже если для элемента <body> установлено значение overflow:hidden;. Выбор метода зависит от ваших конкретных требований и возможностей.