Как запретить скролл body на iPhone?

Question

[Alexander Shalimov]

Здравствуйте.
Есть некое модальное окно при открытии которого надо запретить скролл body.
Использовал overflow: hidden и display: fixed , эти варианты работают прекрасно, но только на десктопе.
Какие есть ещё варианты чтобы запретить скролл?

Comments

[Kovalsky]

Дело в том, что скрывать overflow это вполне рабочий вариант. Если у вас все равно работает, то лучше покажите пример.

[Alexander Shalimov]

Никита Полевой, На десктопе всё прекрасно работает. overflow не работает на iPhone, вот пример https://codepen.io/PiRmanAtE/pen/LzGMEK если его открыть на iPhone то скрол будет работать.

[Василий]

Я столкнулся с такой же проблемой, как в итоге решили проблему?

Answer 1

[Сергей Горячев]

Сложно, но можно.

Магию вызываю только когда popup активен:

$(document).on('touchmove',function(e){
  e.preventDefault();
});

Comments

[Alexander Shalimov]

Спасибо за идею. К сожалению такое решение просто блокирует любое перемещение, что в больших формах крайне не удобно.

[Сергей Горячев]

Alexander Shalimov, Когда попап активен нормально. А когда не активен, можно отменить действие.

Answer 2

[fl3nkey]

Вопрос старый, но тому кто гуглить будет, думаю окажется полезным.
Для таких случаев используйте библиотеку scroll-lock.
Так же прочитайте эту секцию, там описана проблема и решение со скроллом на iOS.

Comments

[Berliozzz]

Круто, спасибо! Искал как сделать так, чтобы не появлялись глюки со скролом на ios при открытии клавиатуры в онлайн чате. Странно, но в основном какую-то нерабочую дичь предлагают. Это решение сразу решило все мои проблемы. Смотрел онлайн чаты на разных сайтах крупных компаний и там тоже много где присутствуют эти глюки, я уже думал, что нужно просто с этим смириться)

Answer 3

[Дан]

overflow: hidden;
height: 100vh;

или, если ios10+

#popup.active:not {
display: none;
}