Streaming live at 10am (PST)

Fullscreen menu that disables page scroll

I’m trying to make a fullscreen menu that when opened prevents the page from scrolling. I’ve read around on the forums but can’t seem to get anything to work. What I’m trying now is from this thread and used the following custom code in the Footer Code section.

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

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

https://preview.webflow.com/preview/fullscreen-menu-explore?utm_source=fullscreen-menu-explore&preview=09d82dae08c0b1fec49159c9499e53c9

1 Like

Works for me when I place the code at a page level in the body tag. where are you putting it?

I put the code in the Footer Code section in project settings.

I got it to work by adding “html” with body. So now the code looks like this in my global footer.

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

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

That’s good to know.