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

Question

[Tigronix]

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

Answer 1

[furashcka]

Попробуйте добавить к .global_wrapper position: fixed; точнее к .body_overflow на видео видно что шапка не дергается, так как контент, по всему она имеет position: fixed;

Comments

[Tigronix]

Спасибо! Гениальное решение!)

Answer 2

[justdealman]

Для .global-wrapper задавать position:fixed при открытии меню, при этом значением top выставить минус текущую позицию скролла, это значение запомнить. При закрытии меню, для .global-wrapper вернуть position:static (или relative, но тогда не забыть обнулить значение top), после чего поставить в скролл в позицию, на которой он был до открытия меню.