Often I find myself locked into a battle of wits with the iOS browser and it’s annoying rendering quirks, and until recently a recurring issue was getting the body to lock in place allowing users to scroll an element inside.
In everything except iOS you can simply use position and overflow css on the body element to freeze the page, however – iOS no likey, iOS no likey at all!
I ended up creating a div inside the body which wrapped the entire document and using the css to freeeze that instead e.g. when the menu pops up on mobile..
At some point I came across the Body Scroll Lock package, which is a far preferable solution, imho!
$ yarn add body-scroll-lock
Roots\Sage would call it thus
const bodyScrollLock = require('body-scroll-lock');
const disableBodyScroll = bodyScrollLock.disableBodyScroll;
const enableBodyScroll = bodyScrollLock.enableBodyScroll;