Prevent background scrolling on mobile

Hi there,

I’m trying to forbid background scrolling of my site once the mobile menu is overlayed (after clicking the hamburger icon). I’ve tried my hardest to implement the solutions suggested in these posts (Forbid background scrolling, Disable background scrolling when mobile menu is active (opened)) - but to no avail.

It’s especially apparent on the ‘Selected Work’ pages because they are quite long pages.

Might anyone be able to help? :pray:t2:

Also & I’m not sure if this complicates matters much or not, but: it’s a full-page overlay on mobile, but on desktop it only takes up a portion of the viewport at the RH side, and I’d still want the user to be able to scroll down in that scenario - will that affect things?

Here’s a published link: http://russell-prowse.webflow.io/

& read-only preview: https://preview.webflow.com/preview/russell-prowse?preview=ee06c2098d3415a1714b370827995f35

Thank you!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Maybe this will work:
Change your Navigation button class from “hamburger menu” to “hamburger-menu”

and add this code to your footer:

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

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

I can’t test the code myself because it’s a read-only preview…

1 Like

Amazing @philippe thank you! I wasn’t pasting it into the footer section before, which might have been why it wasn’t working. Either that or I had copied it wrong.

To get it to work on my site I just had to change the 2nd mention of hamburger-menu to target my cross icon instead. And now to get it to work only on mobile I will just duplicate the classes and make one of them visible just for mobile, rename it, and target that one only so the user can still scroll on desktop when the menu is just at the side.

Thanks again!

Ahh actually this doesn’t seem to be working for me on Safari on iPhone - just when resizng the desktop browser to mobile size. I also added the second script too but still not working. Thank you anyway though!

There was an error in my code (duplicate function). Now it’s working.

Demo:
http://no-scroll.webflow.io/

Clone link:
https://webflow.com/website/Disable-scrolling?s=no-scroll

2 Likes

Thank you so much for this, Philippe! Is this working for you on iPhone? For me when I view on desktop (even at a mobile-sized viewport) it works perfectly, but on actual iPhone Safari I can still scroll. Maybe it’s an iPhone thing…

I did try adding this script from another poster as well which supposedly fixes it, but it doesn’t work for me:

var fixed = document.getElementById('fixed');
fixed.addEventListener('touchmove', function(e) {
        e.preventDefault();
}, false);

:thinking:

1 Like

I don’t have a iPhone… I can’t really help.

But, from the snippet you posted, I see that you need to give an ID (#fixed) to your navigation button

1 Like

@philippe THANK YOU! It was adding the ID that was the thing for mobile - I didn’t notice that at all in the javascript (as I don’t really know how to read it) but now looking back it does pretty clearly say ‘.getElementById’, haha.

If anyone else stumbles across this - I had to add the ID of fixed to my overlay, not the button itslef which was what I tried first.

Thanks so much again, Philippe!

1 Like

Hi guys, I tried to do the same thing but I did something wrong. I added a ID “fixed” to the button too. Can you please tell me where? Thanks

45

Hi Lewis,

So try adding the ‘fixed’ ID not to the button but to the overlay itself - this worked for me

Hi Russell,

I tried adding the “fixed” id to the navbar, and to the open menu itself, and nothing. Perhaps is the code I’ve pasted that’s no well structured. Did you pasted both one after the other?

Hmm… I’m not entirely sure. Can I just double-check you’re publishing the site and not just checking in Preview mode? As it will need to be published for custom code to take affect.

And are you adding the ID in this section? :

45

Also, not sure if it makes any difference but I added my script in the Footer section

Yes I’m publishing it, and tried to add the id to the different related divs or buttons, and also in the footer :confused:

I’ll try to reverse engineer the site provided by Philippe.

Thanks.

I figured it out! But with bugs so weird when viewing on mobile that I’m going to open a new thread :grimacing:

1 Like

Philippe, this is a big help, thank you!

Do you (or does anyone else) know how to achieve the same result if you only have the one button?

Currently, I have an SVG burger icon that animates into a cross on click.

(function() {
  $("#hamburger").click(function() {
  return $(".wrapper-hamburger") .toggleClass("cross");
  });
}).call(this);

I’ve tried implementing your suggested script with a selector, but it doesn’t seem to revert the body’s overflow back to “auto” after being “hidden” from the initial function.

Webflow.push(function() {
  $('#hamburger').click(function(e) {
e.preventDefault();
	$('body').css('overflow', 'hidden');
  });
  
  $('#hamburger.cross').click(function(e) {
e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});

Any ideas? I appreciate this feed isn’t in “custom code help”, but thought to try my luck.

Many, many thanks.

So, I’ve got it working, and thought to share my solution in case it’s helpful to anyone, or totally wrong and someone can correct me. Either way: :crossed_fingers:t2:

Essentially, in custom code, I just added a class to the body called “overflow-hidden” that did just that.

<style>
body.overflow-hidden {
overflow: hidden;
}
</style>

Within the same function that animates my SVG button, I just added the body (after a multiple selector - i.e. “,”) and, in the same way as the animation, toggled the class (“overflow-hidden”) with .toggleClass.

(function() {
$("#hamburger").click(function() {
  return $(".wrapper-hamburger") .toggleClass("cross"),
  $("body") .toggleClass("overflow-hidden");
});
}).call(this);

This also meant I could remove the 10 lines of code as seen in my previous post. I am COMPLETELY new to this however, and so this likely isn’t best practice, but it seems to work…

2 Likes

Hi All - Here is a solution that will also work on iOS: https://webflow.com/website/Lock-Body-Scroll-Including-iOS?s=body-scroll-lock

You mentioned in a post that custom code in the footer is critical. I am not sure what you mean, as custom code only offers sections for header and body on the Page section. Beyond that your clone doesn’t offer seeing the footer code, as project setting code is not offered on clones to my knowledge. Could you please explain? Thanks in advance;-)

could this be anymore complicated? there are 5-6 forum posts on this issue, and dozens of custom scripts, which seem to work for people about 30% of the time, and only on some browsers or some devices. would like to see webflow solve this out of the box. very basic requirement, people complaining about it for 3+ years.