Как остановить прокрутку страницы при прокрутке div с JQuery

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

Дабы предотвратить прокрутку окна во время прокрутки внутреннего div, следует воспользоваться JavaScript и прервать выполнение события scroll. Эффективно исправляет данную ситуацию следующий код, привязанный к событию wheel:

let scrollable = document.querySelector('.scrollable');
scrollable.addEventListener('wheel', (event) => {
  let { deltaY, currentTarget } = event;
  let isTop = currentTarget.scrollTop === 0;
  let isBottom =
    currentTarget.scrollTop + currentTarget.clientHeight >=
    currentTarget.scrollHeight;

  if ((deltaY < 0 && isTop) || (deltaY > 0 && isBottom)) {
    event.preventDefault();
    // Достигли край прокрутки!
});

Этот метод будет работать, если у элемента .scrollable указано свойство overflow-y со значением auto или scroll.

.scrollable { overflow-y: auto; }

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

Работаем с JavaScript безопасно

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

Дошли до конца прокрутки – это не приговор!

JavaScript способен обнаружить окончание прокрутки.

function detectScrollEnd(event) {
  var element = event.target;
  var maxScroll = element.scrollHeight – element.clientHeight;
  
  if ((event.deltaY > 0 && element.scrollTop >= maxScroll) ||
      (event.deltaY < 0 && element.scrollTop <= 0)) {
    event.preventDefault();
    // Дошли до края?
  }
}
scrollableDiv.addEventListener('wheel', detectScrollEnd);

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

Контролируем направление прокрутки

Воспользуемся условной логикой для определения направления прокрутки.

function scrollGuard(event) {
  let { deltaY, currentTarget: div } = event;
  let maxScrollTop = div.scrollHeight – div.clientHeight;

  if ((deltaY > 0 && div.scrollTop < maxScrollTop) ||
      (deltaY < 0 && div.scrollTop > 0)) {
    // Прокрутка разрешена
  } else {
    // Прокрутка вверх или вниз не доступна!
    event.preventDefault();
  }
}
scrollableDiv.addEventListener('wheel', scrollGuard);

Прокрутка на сенсорных устройствах под контролем

Обработчик события touchmove с параметром passive: false позволяет контролировать прокрутку на сенсорных устройствах.

scrollableDiv.addEventListener('touchmove', (event) => {
  // Блокируем прокрутку окна.
}, { passive: false });

Контролируем переполнение без излишеств

С помощью функции переключения управляем влиянием тега body.

function toggleBodyScroll(isEnabled) {
  document.body.style.overflow = isEnabled ? 'auto' : 'hidden';
  // Прокручиваем или не прокручиваем, вот в чем вопрос.
}

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

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

Лифт (🛗): Независимо передвигается вертикально [🔼⬆️🔽]
Человек (👤): Желает прыгнуть, не влияя на движение лифта.

🛗🔽 👤🆙 (Ого! Здание начинает дрожать!)

Нам необходим стратегический разрыв между действиями человека и движением лифта:

🛗   👤🆙 (Идеально! Человек прыгает, лифт стоит на месте.)

Главная идея: Защитить окно (здание) от реакции на действия внутри внутреннего div (лифта). 🛗🔒👤

Важные моменты!

Совместимость – ключ к надежности

Убедитесь, что ваше решение безупречно работает во всех браузерах и на всех платформах, включая устаревшие версии и сенсорные устройства.

Всегда оставайтесь в тренде!

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

Производительность – наше важнейшее стремление!

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

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

1. overflow – CSS: Cascading Style Sheets | MDN — Информация о свойстве overflow на MDN.
2. Обработка и генерация событий в браузере — Простое пояснение концепций всплытия и захвата событий.
3. Disable scrolling in all mobile devices – Stack Overflow — Ответы сообщества на вопрос о том, как отключить прокрутку на мобильных устройствах.
4. pointer-events | CSS-Tricks — Статья о свойстве pointer-events.
5. CSS Layout – The position Property — Всё о свойстве position: fixed и контроле поведения элементов.
6. touch-action – CSS: Cascading Style Sheets | MDN — Обзор свойства touch-action для управления жестами на сенсорных экранах.
7. Element: wheel event – Web APIs | MDN — Информация по событию wheel на MDN.