Определения прокрутки до конца страницы в jQuery для пагинации

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

Чтобы определить, доскроллил ли пользователь до низа элемента, следует сравнить текущее положение прокрутки scrollTop, видимую область clientHeight и полную прокручиваемую высоту scrollHeight. Если сумма значений scrollTop и clientHeight равна или больше scrollHeight, значит, дно элемента достигнуто.

element.addEventListener('scroll', () => {
  if (element.scrollTop + element.clientHeight >= element.scrollHeight) {
    console.log("Мы достигли дна, ребята!");  // Такой юмор программистов о погружении в код
  }
});

Для более плавного функционирования и увеличения эффективности рекомендуется использовать функцию дебаунсинга:

const debounce = (func, delay) => {
  let inDebounce;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(inDebounce);
    inDebounce = setTimeout(() => func.apply(context, args), delay);
  };
};

element.addEventListener('scroll', debounce(() => {
  if (element.scrollTop + element.clientHeight >= element.scrollHeight) {
    console.log("Мы достигли дна, ребята!");  // И это не шутка
  }
}, 100));

Вступаем в интерактив с прокруткой

Слишком частые события прокрутки способны вызывать сбои в интерфейсе. Использование дебаунсинга или торможения помогает минимизировать риски и обеспечивает плавность работы.

В общепризнанное понимание высоты документа вне зависимости от браузера удобно внести функцию Math.max():

const getDocHeight = () => {
  return Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
  );
};

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

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

Рассмотрим наглядное сравнение: пускай ваш элемент будет изображен стаканом, а прокрутку элемента – уровнем воды внутри него:

const glass = document.querySelector('.scrollable-element');

glass.addEventListener('scroll', function() {
  const waterLevel = glass.scrollTop + glass.clientHeight;
  const glassHeight = glass.scrollHeight;

  if (waterLevel >= glassHeight) {
    console.log('Мы выпили до дна, товарищи!');  // Шутка программистов о достижении цели
  }
});

Простейшее представление этого процесса выглядит следующим образом:

|--🔺--| <- Верхняя грань стакана (scrollHeight)
|      |
|  💧  | <- Уровень воды (scrollTop + clientHeight)
|  💧  |
|--🔽--| <- Мы выпьем до дна, когда уровень воды дойдет до этой точки!

При динамическом добавлении нового контента мы постоянно корректируем уровень прокрутки — "воду".

Бесконечная прокрутка и ее подводные камни

Избегаем зацикливания

Чтобы предотвратить повторную загрузку одного и того же контента, стоит использовать флаг состояния запросов Ajax или булев флаг.

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

Точность имеет значение

Запускайте проверку прежде, чем пользователь дойдет до самого низа, установив небольшой порог (threshold):

const threshold = 100; 

glass.addEventListener('scroll', () => {
  const nearBottom = glass.scrollHeight – glass.scrollTop – threshold;
  if (nearBottom <= glass.clientHeight) {
    console.log('Встряхнуть, не перемешивать!');  // Остроумие в стиле Джеймса Бонда
  }
});

Используйте альтернативные подходы

Если методы scrollHeight и clientHeight оказались недостаточно точными, используйте getBoundingClientRect() для более надежного отслеживания прокрутки.

Улучшение пользовательского опыта

Предзагрузка

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

Примените современные API

Используйте Intersection Observer API для отслеживания видимости элементов. Этот метод эффективнее традиционного слежения за прокруткой и лучше справляется с изменчивой высотой элементов.

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

1. Element: scroll event – Web APIs | MDN — подробности события scroll в MDN Web Docs.
2. javascript – Check if a user has scrolled to the bottom (not just the window, but any element) – Stack Overflow — Советы от сообщества Stack Overflow о том, как определить прокрутку до низа элемента.
3. Размеры окна и прокрутка — Все о работе с размерами окна и прокруткой в JavaScript.Info.
4. Получение ширины и высоты элемента — об использовании getBoundingClientRect() для измерения прокрутки от PlainJS.
5. .scrollTop() | jQuery API Documentation — описание метода scrollTop в jQuery API для функционала прокрутки.
6. Документация Lodash — об управлении событиями прокрутки через функцию throttle в Lodash.
7. Как создать кнопку "Прокрутка наверх" — инструкция от W3Schools по созданию кнопки для быстрой прокрутки страницы вверх.