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

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

Чтобы проверить, проскроллена ли страница до конца с помощью JavaScript, следует использовать условие: window.innerHeight + window.scrollY >= document.documentElement.scrollHeight. Если оно вернет true, это значит, что вы находитесь в конце страницы. Такую проверку удобно разместить в обработчике события scroll:

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.pageYOffset >= document.documentElement.scrollHeight) {
    console.log('Прокрутка достигла конца страницы!');
  }
});

В данной части кода мы отслеживаем достижение конца страницы, сравнивая высоту видимой части окна и пройденое расстояние прокрутки с общей высотой документа.

Совместимость с различными браузерами

Работая с разными браузерами, важно использовать window.pageYOffset вместо window.scrollY, чтобы избежать проблем совместимости:

window.addEventListener('scroll', () => {
  if (window.innerHeight + (window.pageYOffset || document.documentElement.scrollTop) >= document.documentElement.offsetHeight) {
    console.log('Нижняя граница достигнута!');
  }
});

Следует помнить, что window.scrollY не поддерживается в Internet Explorer, в то время как window.pageYOffset работает без сбоев.

Учет различий в пользовательском интерфейсе

Если в интерфейсе вашего сайта присутствуют элементы как панели инструментов, фиксированные внизу, или футеры, их следует учитывать при проверке достижения нижней части страницы:

const OFFSET_TOLERANCE = 10; // пиксели, значение которое можно настроить под интерфейс вашего сайта

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.pageYOffset >= document.documentElement.scrollHeight – OFFSET_TOLERANCE) {
    console.log('Вы близки к цели! Осталось совсем немного.');
  }
});

Добавление значения OFFSET_TOLERANCE обеспечивает более точную работу механизма определения окончания прокрутки.

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

Представьте себе процесс прокрутки страницы как поездку в лифте:

| Лифт 🛗                       | Позиция            |
| ---------------------------- | ------------------ |
| Позиция окна при прокрутке   | 🏙️🆙 (восхождение) |
| Конец страницы               | 🏙️🔚 (конечная точка)|

Когда вы видите из окна лифта последний этаж:

if(window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    // Вы достигли 'низа'! Не переживайте, дальше только вверх.
}

Автопрокрутка: когда вручную скроллить 'бесконечно' не хочется

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

function isUserAtBottom() {
  // Проверяем, достиг ли пользователь 'низа'
  return window.innerHeight + window.pageYOffset >= document.documentElement.scrollHeight;
}

function scrollToBottom() {
  // Проводим пользователя до 'низа', делаем это сглаженно!
  window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
}

// ...в вашем коде, после добавления нового контента

if (isUserAtBottom()) {
  scrollToBottom();
}

Обработка динамического контента и изменений макета

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

// Пересчитываем высоту страницы после добавления нового контента,
// это как перепланирование бюджета после непредвиденных растрат.
function reCalculatePageHeight() {
  // Логика для перерасчета
}

window.addEventListener('resize', reCalculatePageHeight);

Учтите, что изменение размера шрифтов также может влиять на высоту содержимого страницы. Следите за необходимыми событиями и уведомлениями.

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

1. Свойство Window: scrollY – Веб-API | MDN — подробное описание свойства scrollY.
2. API Intersection Observer – Веб-API | MDN — API для определения видимости элементов.
3. javascript – Проверка, прокрутил ли пользователь до конца (не только окно, но и любой элемент) – Stack Overflow — советы по проверке, достигли ли вы конца прокрутки в различных контекстах.
4. Debouncing и Throttling, объяснённые на примерах | CSS-Tricks — обзор концепции debouncing и throttling для оптимизации обработки событий прокрутки.
5. Плавная прокрутка | CSS-Tricks — описание реализации плавной прокрутки.