@Andy_Francev
Frontend Developer

IOS. Почему не блокируется scrolll?

5ac3d12919884275042703.gif
Добрый день!
Верстаю сайт, и столкнулся со странным поведением только на iOS устройствах. Открываю форму поиска. Запрещаю скролл:
const viewPortH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    const documentBody = document.getElementsByTagName('body')[0];
    documentBody.style.overflowY = 'hidden';
    documentBody.style.position = 'fixed';
    documentBody.style.height = viewPortH + 'px';

На всех устройствах и во всех браузерах работает нормально (и на десктопах, и под Андроидом), но не на iOS. Как только на экране появляется клавиатура, так тут же появляется возможность всё поскроллить. Если прячу клавиатуру, то скроллить, как и задумано, вновь становится невозможно.
Есть такое решение:
document.ontouchmove = function (e) {
        e.preventDefault()
    };

Но мне оно не подходит потому, что запрещает скролл везде и всюду, а на моём сайте после ввода текста в input формы поиска, поверх всех элементов появляется блок с подсказками, и ему скролл тоже становится недоступен, а он нужен.
  • Вопрос задан
  • 183 просмотра
Решения вопроса 1
FLUNKEY
@FLUNKEY
самовар
Никогда не запрещайте скролл таким способом, которым вы пытаетесь (первым).
Используйте библиотеку scroll-lock для работы с нативным скроллом.
Так же прочитайте эту секцию, там описана проблема и решения со скроллом в iOS..
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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