Scroll overlay form on mobile

Design help General
1

Hi there!
On mobile devices when I have an overlay form active, I still scroll the background rather than the overlay. How can I avoid this?

You can see what I mean here (in Swedish though) so click on any “Anmäl Dig” button:

Share link to website:

https://preview.webflow.com/preview/stark-yoga?preview=69461eadfbb6c7720351f6ba804da57e

2

Hi there,

Definitely a great question!

I was able to take a look at your project, and create a test clone for you to test the custom code mentioned in the following forum post:

You can view the test at http://stark-yoga-test.webflow.io/courses-ljusdal/yoga-i-ljusdal

You will notice that the custom code used for your particular project is as follows:

<script>Webflow.push(function() {
  $('.take-course').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });

  $('.close-link').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});</script>

The above script works as follows:

When menu button (or any other object which class you will add) is clicked, the JS code will change the CSS of the body and make it overflow: hidden >>> that makes the body unscrollable.

Then, the next part of the script takes the click from another element (close button, menu, modal background, etc.) and change the CSS of the body again, making it overflow: auto >>> that makes the body scrolling again.

Definitely a great question, and hopefully this is helpful.

Got to see a huge thank you to @sabanna for the original walk-through :bowing_man: