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