Streaming live at 10am (PST)

Fullscreen menu that disables page scroll


#1

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


Fixed overlay error on mobile
#2

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


#3

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


#4

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>

#5

That’s good to know.