Web_Mukhammad
@Web_Mukhammad
frontend-разработчик

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

Есть событие на открытие модального окна. при открытии окна у 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%;?
  • Вопрос задан
  • 660 просмотров
Пригласить эксперта
Ответы на вопрос 2
FeST1VaL
@FeST1VaL
Тихий
Как вариант сделать ограничения у touch на move и start.
Ответ написан
Комментировать
Web_Mukhammad
@Web_Mukhammad Автор вопроса
frontend-разработчик
Такс ребята. Нашел решение, при открытии модального окна выполняется следующие действие:
$('.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; };
  });

будет чуть чуть дергаться, но это лучше чем остаться со скроллом
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы