I’ve been working on a modal pop-up for a landing page, and I would like to disable scrolling of the main document body, while the modal is active. I’ve followed this tutorial: Disable body scrolling | Class Adder for Webflow Interactions - YouTube
In a gist, the tutorial adds a class to the body tag that enables ‘overflow: hidden’, once the modal is active, and removes the class, once the modal is inactive.
The script itsself works, but the overflow:hidden behavior of the body is different on Chrome and Edge. It works on Edge, not on Chrome.
You can see the current website in progress here:
To test the problem, scroll down until you see a “Download Metaphonic” button. Click it and see the modal popping up.
How can I prevent the body from scrolling in all browsers, while the modal is active?