Scrolling underneath the modal?! i want it to stop scrolling

[Baseem_Ahmad]

Dear All,

below my links, I need help in solving a problem im totally new to webflow and i started to learn alot from forum and tutorials available, i create a pop up modal which is work good but the website keep scrolling while im scrolling in my pop up modal and when i close the pop up modal i find my self in other place in the website. and help?!!

https://preview.webflow.com/preview/baseems-fantastic-site?preview=5d4fa806aa7377a9f5dd179b0f055fa9

this is my website, and im trying to solve the scrolling issue underneath the pop up modal i appreciate your help guys on this

regards,

Here is my public share link: LINK
(how to access public share link)

[vincent (Vincent Bidaux)]

Hi Baseem !

Ok first, that’s not a bug of anything, that’s just how HTML works with your browser: it scrolls what it can. So it’s not what you want, but it’s normal

So to prevent that, you need Javascript code. The script has to be activated by a click on an element (the element you click on to open the popup). It then uses a trick (overflow:hidden) to prevent the scroll in the body element. And then it needs to be deactivated by another click on another element (the element you click on to close the popup)

Here is the script:

<script>
Webflow.push(function() {
  $('.NAME-OF-OPEN-ELEMENT').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });
  $('.NAME-OF-CLOSE-ELEMENT').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});
</script>

So you need to replace in the script the class names in CAPS.

So for your site it should look ike this:

<script>
Webflow.push(function() {
  $('.link-block-test').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });
  $('.pop-up').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});
</script>

And you need to put that there:

http://vincent.polenordstudio.fr/snap/kvsvy.jpg

It should work once published

[Baseem_Ahmad]

@vincent

<script>
Webflow.push(function() {
$(‘.link-block-test’).click(function(e) {
e.preventDefault();
$(‘body’).css(‘overflow’, ‘hidden’);
});
$(‘.pop-up’).click(function(e) {
e.preventDefault();
$(‘body’).css(‘overflow’, ‘auto’);
});
});
</script>

you are amazing man, it did work on desktop version but did not work in my mobile version

[vincent (Vincent Bidaux)]

You can give a shout to @bart who wrote this code for me a while ago. Using the code on many sites now, it proved itself reliable