How do I prevent menu background scroll? [Video]

Design help General
1

Hi Y’all,

I’m trying to figure out how to disable the background behind my mobile menu only when it’s open. I made a video as I figured it’s easier than to try and explain exactly what my issue is (it’s short):

The way the menu works is the hamburger button triggers an interaction that changes the display of the menu to block and back to hidden on the second click.

Here’s a read only link:

https://preview.webflow.com/preview/oh-snap?preview=a6342b5213ceac65bffd890557fac0c1

I really appreciate any help.

1 Like
2

Anyone? Hello??? :disappointed_relieved:

3

Hi @MichaelMannucci,

I’ve asked the same question a couple days back and my issue was with a pop up modal that I created while following Webflow’s tutorial. @PixelGeek replied to me and told me to put this code in my project to see if it might make a difference. In my situation, it helped the lag, but it did not stop the background from scrolling while the pop up modal was activated.

Maybe the code could work for you?

<script src="https://code.jquery.com/jquery-2.2.0.min.js" integrity="sha256-ihAoc6M/JPfrIiIeayPE9xjin4UWjsx2mjW/rtmxLM4=" crossorigin="anonymous"></script>
<script>
$('a.button.other').on('click', function(){
     $('body').css('overflow','hidden');
})
$('.close-link').on('click', function(){
     $('body').css('overflow','visible');
})
</script>

Let me know!

Dan

4

Thanks for your reply.

I’m not overly familiar is jQuery. I am a beginner in Javascript, so I can understand the logic here, as I was trying to do this just now in Javascript, I just can’t figure out what exactly is the target in this.

Meaning, is “close-link” supposed to be the ID for my hamburger menu? Or “button” or “other”? Not sure.

@PixelGeek Any help on clarifying this?

Thanks!

5

I figured out a way to do this.

I ended up bypassing the Webflow interactions altogether and writing the jQuery for the whole menu/hamburger animation. I also wrapped the whole site in a div and changed that div’s properties via jQuery rather than the body (as changing the body to overflow: hidden didn’t work on mobile.)

I used the following code before the tag:

<script>
$(document).ready(function(){
    $("#menuButton").click(function(){
        $("#siteWrapper").toggleClass("bodyScroll");
  	    $("#mobileMenu").fadeToggle();
	    $("#hamTop").toggleClass("hamTop");
  	    $("#hamMid").toggleClass("hamMid");
  	    $("#hamBtm").toggleClass("hamBtm");
    });
});
</script>

<style>
  .bodyScroll {
      overflow: hidden !important;
      position:fixed !important;
      top:0 !important;
      bottom: 0 !important;
  }
  
  .showHideMenu {
      display: block;
  }
  
  .hamTop {
      width: 35px;
	  transform: translate(5px,8px) rotate(45deg);
      background-color: white;
  }
  
  .hamMid {
      transform: translate(5px,0px);
      opacity: 0;
  }
  
  .hamBtm {
      width: 35px;
	  transform: translate(5px,-8px) rotate(-45deg);
      background-color: white;
  }
</style>

I think it’s unfortunate that I couldn’t do this with Webflow’s interactions widget. All that is missing is the ability to change CSS properties other than “display” and “size”, such as overflow. Would be great if we could manipulate all CSS properties with interactions.

I also find it strange that Webflow doesn’t permit distinguishing between overflow-x and overflow-y. Hopefully this will be implemented in the future.

Thanks!

1 Like
6

Thats awesome Michael! Thanks for the update :smiley: