Preventing scroll on nav open

Design help Custom code
1

Hi!

I’ve been trying to use this code for preventing scroll once my nav is open.

I have the same button for menu open and close. The scroll is correctly disabled when I change the class name of the second ‘menu’. But the scroll isn’t activated when the menu is closed. It doesn’t work at all if both the class names are the same (as shown in the above code). Can anyone help?

2

Please, can you share your read only link?

Some examples, screenshots or videos about the issue will help as well.

3

Hi,

try putting this code on the footer code section, and give the open menu element the id “fixed”:

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

4

Clone or view the following project via designer:

https://webflow.com/website/Lock-Body-Scroll-Including-iOS

  1. The custom code in the footer is critical
  2. The layout/structure is also important, but is flexible enough to accommodate nearly every design.

The implementation should work across all browsers and devices (including iPhone). Let me know if you have any questions.

5

Hi! I thought I had shared the link. Really sorry.

Here you go… https://preview.webflow.com/preview/algavista-12?utm_source=algavista-12&preview=e4836fd76b811c3c187cb8ff70f27430

This is the code I used;

You can note that menu-wrap is the name of the hamburger menu I used. Since I don’t have a separate close button I’ve used ‘menu’ as the placeholder class name. This code disables the scroll when the menu is open but it does not activate it when the menu is closed. If I put the same class name in both the places, the code doesn’t work at all.

Please help!

6

Hi! But this set up has two separate buttons for open and close. My project doesn’t. Can it be manipulated to work for the same button?

7

Unfortunately it cannot but updating this in your project should be fairly straightforward.

8

can you please explain how it can be manipulated to work for the same button?

9

@d.Occ

Hey, let me know if this works for you.

Inside head tag add:

<style>
html.no-scroll {
  overflow: hidden;
}
</style>

and before the body tag add:

<script type="text/javascript">$('.burger').on('click', toggleScrolling);
function toggleScrolling() {
  $('html').toggleClass('no-scroll');
}</script>

give your ‘button’ the class ‘burger’

clicking this on and off should lock and unlock scroll

7 Likes
11

Hello Thomas,
It worked really well!
Thanks a lot for your prompt assistance.

12

Hey Thomas,
I am currently facing an issue with your fix. If you click on ‘nav button’ the scroll bar disappears and clicking it on again the scroll bar appears again, you’ll see a slight layout shift as things squeeze inward a bit to make room for the scrollbar. Is there any way to keep the layout intact?

13

Hi Thomas,
Would you know how to lock/unlock scroll on iOS too?

14

@jan This link I provided above will prevent scroll on iOS

15

This works beautifully! Thank you.

16

Another option is to use this:

overscroll-behavior: contain

Use this on the scrollable div you want to contain the scroll to. This has about 70% coverage presently, but it’s nice to prevent scroll chaining from the div to the body and undesired page refresh.

1 Like
17

No support on Safari (especially on iOS) is a deal breaker unfortunately.

18

The custom code in the footer is critical - Viewing custom code on a footer doesn’t seem possible with a cloned project. I have tried this a few ways without it but it could be my missing part. Do I need the footer code?

19

Works great everywhere apart from Safari iOS for me:

20

Hi! I just wanted to mention that the folks at Fin-Sweet have provided a very simple solution to this:

Cheers!