Menu icon Foundation
Foundation 6 Off-Canvas JS Help

With Foundation 5, I had some working jQuery that would prevent the body from scrolling when the off canvas was activated, but allow the off-canvas menu to scroll. My old code is no longer working with Foundation 6. And, while the new docs for sites are very helpful, I am finding it slightly harder to understand and implement JS. I am sure this is partially due to my ignorance, but I am not sure how specifically to add event listeners or whatever I would need to do to achieve this functionality..

Also, in the _settings.scss file, $maincontent-prevent-scroll is set to true . . . which I had imaged would also help with what I am trying to do, but the page has always scrolled when the off canvas is active.

So, just to clarify, I want the entire body to be overflow: hidden; (or however is best to prevent scrolling) on everything except the off canvas menu itself.

Anyone have any suggestions?

off-canvasjsfoundation 6sites

With Foundation 5, I had some working jQuery that would prevent the body from scrolling when the off canvas was activated, but allow the off-canvas menu to scroll. My old code is no longer working with Foundation 6. And, while the new docs for sites are very helpful, I am finding it slightly harder to understand and implement JS. I am sure this is partially due to my ignorance, but I am not sure how specifically to add event listeners or whatever I would need to do to achieve this functionality..

Also, in the _settings.scss file, $maincontent-prevent-scroll is set to true . . . which I had imaged would also help with what I am trying to do, but the page has always scrolled when the off canvas is active.

So, just to clarify, I want the entire body to be overflow: hidden; (or however is best to prevent scrolling) on everything except the off canvas menu itself.

Anyone have any suggestions?

balazs sziklai about 4 years ago
John French about 4 years ago

Functionally, yes, that is the effect I am going after. But with the template I am working with, I don't know that I want to rely on making the off-canvas-content wrapper 100vh.

My off-canvas menu is located beneath my header and above my footer. I only want the middle section to be pushed to reveal the off-canvas, so that is where my off-canvas-content section is located. If I make that 100vh and then make the off-canvas menu 200vh, then my footer would no longer be visible in many cases where it probably should be.

Here is an image of the way my template is set up and hopefully that will make it more clear what I trying to accomplish. The repeated menu items are just there to simulate a long menu, just FYI.

http://imgur.com/rfQYuyS

Thank you for your quick reply, but if possible, I may need to explore a different option.

balazs sziklai about 4 years ago

the values I`m using just examples(). the 200vh is not needed. I just wanted to make sure that the content is smaller than the offcanvas menu. However whatever you do, this is a simple css isue and not really releated to js/or foundation at all.

...and a vh polyfill:
https://gist.github.com/LeaVerou/1347501

John French about 4 years ago

Okay, I think I see what you are saying.

When the off-canvas menu itself is longer than the content, that simulates what I am going for, but doesn't achieve it completely, because you can still scroll on the main page itself as well.

The way I fixed it with Foundation 5 was by having JS that would change the body tag to overflow:hidden when the off-canvas was engaged. Then, when you closed the off-canvas menu, it would remove overflow:hidden.

I am sure there is a way to do this in Foundation 6 - I am just not sure how to make that happen with the new release. If there is a css/scss solution that would achieve the same thing, I'd be happy to try it out, but so far I haven't been able to find a solution that wouldn't involve some JS.