Как предотвратить излишнюю прокрутку в iOS Safari? - PullRequest
Новая
       26

Как предотвратить излишнюю прокрутку в iOS Safari?

1 голос
/ 18 июня 2019

На веб-странице у меня есть оверлей div, который будет отображаться при нажатии на определенную кнопку или изображение.Чтобы избежать прокрутки в фоновом режиме, я добавил класс CSS к телу с overflow: hidden при отображении наложения.

В настольных браузерах это работает, как и ожидалось, но не в iOS Safari (в моем случае iOS 12.x), страница все еще прокручивается в фоновом режиме.

Кто-нибудь знает решение? 

$('.item-overlay, .item-overlay .morelink').on('click', function(e) {
  overlay_id = $(this).parent().parent().attr('id') + '-popup';
  page_link = $(this).attr('data-typolink');

  $('#' + overlay_id).css('display', 'flex').hide().fadeIn(300);
  $('#' + overlay_id).scrollTop(0);

  $('body').addClass('NoScrolling'); // Scrollen im Hintergrund vermeiden (durch Hinzufügen einer entspr. CSS-Klasse)
  $('body').on('touchmove', function(e) { // doesn't work
    e.preventDefault();
  });
});

body.NoScrolling {
  overflow: hidden;
}

1 Ответ

0 голосов
/ 18 июня 2019

Наряду с overflow добавьте эти свойства, чтобы предотвратить прокрутку тела 

body.NoScrolling {
  overflow: hidden;
  position: fixed;
  height: 100vh;
}
...