@Tigronix

Как сделать скролл мобильного меню так, чтобы скролило только меню, а не всю страницу + меню(V2)?

Всех приветствую Господа и заранее спасибо каждому за ответ!
Есть вот такой сайт: noutbook-remont.ru
На нём есть мобильное меню и уже сейчас там есть мобильное меню - сама страница не скроллится при скролле меню.
(Сперва я задал overflow: hidden; к body, но скролл оставался. Поэтому я обернул header, content, footer в один div и назвал его global_wrapper. Этому global_wrapper задал: "overflow: hidden; height: 100vh;").
На андроиде это работает без проблем. Нету не "дерганий", не скролла.
Но! На айфоне выходит такая ситуация: https://youtu.be/5VTEWe_hPsQ
То есть получается каждый раз пользователь пытается скроллить и утыкается в границы страницы и каждый раз контент "дергается", "прыгает" вместе со скроллом.
Я пытался это поправить разными способами, но мне не приходит в голову мысли, как можно это решить. И можно ли вообще?
  • Вопрос задан
  • 1804 просмотра
Решения вопроса 1
@furashcka
Попробуйте добавить к .global_wrapper position: fixed; точнее к .body_overflow на видео видно что шапка не дергается, так как контент, по всему она имеет position: fixed;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@justdealman
Для .global-wrapper задавать position:fixed при открытии меню, при этом значением top выставить минус текущую позицию скролла, это значение запомнить. При закрытии меню, для .global-wrapper вернуть position:static (или relative, но тогда не забыть обнулить значение top), после чего поставить в скролл в позицию, на которой он был до открытия меню.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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