examp1
@examp1

Скрол заднего фона на айфоне как пофиксить?

Добрый день, ситуация такая есть сайт elit.owlweb.com.ua заказчик тестирует его с айфона и на моб меню появляться скрол заднего фоно как это убрать ? Пробовал уже очень много способов и фиксировать body при клике на "Каталог" и overflow: hidden; у меню итд....
видео для наглядности
PS : заказчику важно чтобы у него все работало так-что можно использовать любые костыли
  • Вопрос задан
  • 133 просмотра
Пригласить эксперта
Ответы на вопрос 4
profesor08
@profesor08 Куратор тега CSS
Это происходит потому, что выдвинув меню, поведение страницы никак не меняется, и логично, что будет и прокрутка. Так что все в порядке, и работает так как и должно работать.

Так что, если хочешь добиться желаемого эффекта, то при открытии меню, для некоторых элементов надо задать следующие стили.
body {
  height: 100%;
  overflow: hidden;
}

.scroll {
  overflow: hidden;
}
Ответ написан
@makster231
В своё время, очень долго не мог найти решение без посторонних библиотек, но в конце концов нашёл
Просто вызываешь функцию disableScroll в нужный тебе момент и вуаля
Это решение касается только телефонов, поэтому желательно также добавить класс со свойством oveflow: hidden для десктоп

function preventDefault(e) {
e.preventDefault();
}

function disableScroll() {
document.body.addEventListener('touchmove', preventDefault, {passive: false});
}

function enableScroll() {
document.body.removeEventListener('touchmove', preventDefault, {passive: false});
}
Ответ написан
@romanu418
body.lock{
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
}
Ответ написан
Ваш ответ на вопрос

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

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