Streaming live at 10am (PST)

Prevent scrolling while menu is open


#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


#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.


#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