Prevent scrolling while menu is open

Design help Custom code
1

Hey guys,

I’m sure a few of you have encountered this issue and I know there are some posts looking for solutions.

I am looking to lock the scrolling of the body when the burger menu is clicked. So sort of overflow hidden then overflow auto as its clicked on and off.

I can do this externally without any issues, but I am struggling to get a solution within webflow.

Currently I am using this:

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

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

Which is fine for locking the scrolling as you can see on the site, but it doesn’t then unlock.

Any suggestions would be sweet.
Thanks guys

https://preview.webflow.com/preview/ws18?preview=8d3bfd94118c14830af4ee1c35b0a031

1 Like
2

Hi @Thomas_92, here is an older post with a solution: How to prevent body from scrolling when modal window open

Might need to check the classes that are being targeted, can you help to share the published site link?

3

Hi @cyberdave,

I did have a look through a few of these post, but had no luck applying it despite the same code etc.

I can absolutely get it working if I export the site, but I was hoping to host this particular one with webflow.

Here’s that link:
http://ws18.webflow.io/

Thanks

4

Hi @Thomas_92, the code on the published site does not match the example you have listed.

I show this code on the published site:

Webflow.push(function() {
$('.burger-wrapper').click(function(e) {
e.preventDefault();
$('body').css('overflow', 'hidden');
});

$('.menu-block').click(function(e) {
e.preventDefault();
$('body').css('overflow', 'auto');
});
});

It looks like you need to change the class name on the second click from ‘menu-block’ to ‘.burger-wrapper’

5

Sorry, unfortunately I’ve tried that also and it won’t work.

I’ve reflected that on the site now, so you’ll be able to see that is still not working.

Thanks

6

Hi, thanks, I am taking a look.

7

Just to note:

This is how I have it set up on one of my exported sites that locks the scrolling.

8

Hey Dave,

Did you have any luck finding a solution?

Thanks!

9

Hi @Thomas_92, this one is a bit strange, the custom code should work but it is not for some reason, I am continuing to check on this.

1 Like
10

Hey guys, bumping this post. Hoping to host it with webflow today, if I can’t get it locking Ill have to export which I’d rather not!

Thanks

1 Like
11

@cyberdave @Thomas_92 did you guys ever make any waves on this? or is there another forum / solution you can point me to?

5 Likes