Не работает overflow:hidden у body и html на iPhone?

Question

[Мухаммад Магомедов]

Есть событие на открытие модального окна. при открытии окна у html и body должен блокироваться скролл (используем overflow:hidden), но он не работает именно у iPhone и у стандартного браузера xiaomi (возможно, не работает где-то ещё, не проверяли). на обычных браузерах андроида работает точно

Пример кода появления
overflow:hidden;

$('.product_btn, .social_callback').click(function () {
    $('html, body').css('overflow', 'hidden');
});

Испробовали варианты position: fixed; и position: relative;

Так же задавали height:100%;

Либо скролл у body работал, как и раньше, либо скролл блокировался, но при этом перебрасывало на самый верх страницы. Такой вариант нам не подходит.

Как сделать так, чтобы этот скролл блокировался у body, но при этом не перебрасывало на самый верх страницы, как это происходит при height: 100%;?

Comments

[tyzberd]

а вы походите по демо модальных окон, если они норм работают, так это у вас проблема
https://getbootstrap.com/docs/4.3/components/modal...
https://fancyapps.com/fancybox/3/
https://dimsemenov.com/plugins/magnific-popup/

[Мухаммад Магомедов]

tyzberd, у них тоже скролится

Answer 1

[FeST1VaL]

Как вариант сделать ограничения у touch на move и start.

Answer 2

[Мухаммад Магомедов]

Такс ребята. Нашел решение, при открытии модального окна выполняется следующие действие:

$('.product_btn, .social_callback').click(function () {
    var scrollX = window.scrollX;
    var scrollY = window.scrollY;
    window.onscroll = function () { window.scrollTo(scrollX, scrollY); };
  });

а при закрытии отменяем:

$('.popup_close, .modal_close').click(function () {
    window.onscroll = function () { return; };
  });

будет чуть чуть дергаться, но это лучше чем остаться со скроллом