Streaming live at 10am (PST)

Preventing scroll on nav open


#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:

  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


#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?