Блог

У меня есть модальное поле для мобильного сайта (устройство ios), которое содержит прокручиваемый контент внутри него. Первоначальная проблема заключалась в том, что при прокрутке содержимого внутри модальной страницы прокручивалась даже фоновая страница. Чтобы исправить это, я добавил свойство ‘position: fixed’ к тегу body при открытии modalbox и удалил его при закрытии modalbox.

Хотя это устраняет проблему с начальной прокруткой, это приводит к тому, что страница прокручивается вверх при добавлении «фиксированного свойства:» к тегу body, и страница прокручивается в исходное положение после закрытия модального поля.

Хотелось бы найти решение, позволяющее избежать прокрутки страницы до верха, если в тело добавлено фиксированное свойство.

Одним из способов сделать это было бы отслеживать события касания и вращения и вызывать для них preventDefault, когда вы знаете, что они собираются прокручивать неправильный элемент. Вот основная идея:

 element.addEventListener('touchstart', onTouchStart);
element.addEventListener('touchmove', onTouchMove, { passive: false });
element.addEventListener('wheel', onWheel, { passive: false });

onWheel(event) {
  // Walk up the DOM tree from target element until the 
  // topmost element you want to isolate scroll with
  // i.e. your modal and check if any of the elements
  // can be scrolled in the wheel direction (event.deltaY).
  // If there are no such elements, call event.preventDefault().
}

onTouchStart(event) {
  // Store initial touch coordinates to determine direction later
}

onTouchMove(event) {
  // Using initial touch coordinates determine direction of the move
  // and do the similar thing as with the wheel event — call
  // event.preventDefault() if you know that resulting scroll will happen
  // outside of your modal
}