Disable scroll when menu is open

Hi, folks. First post but I’ve been lurking for a while. I’m building my own site but I’m not a savvy web developer or designer, so please forgive my ignorance.

My problem: I’m having trouble disabling scroll when my menu is open. I’ve seen the few articles and solutions posted in the forum but they all seem to have customized code/classes for that specific project. When I try to figure out what classes to use with my specific site, I can’t seem to make anything work. Presently when you open the menu you can continue scrolling the content as well as the menu div, and I’d like both disabled until the menu is closed again.

Can someone please take a look at my site and offer a solution? Grateful for this forum and all the contributors, thank you. Here is my site Read-Only:

https://preview.webflow.com/preview/thewindsbrook?utm_medium=preview_link&utm_source=designer&utm_content=thewindsbrook&preview=44be43274dc27f8145833a46cbc5f73b&pageId=60ededfc3f29c33d67d86fa7&workflow=preview

Hi, @ewindsbrook.
Can I have a published link to test?

Hi, @Smith.S. You can see the published version at https://thewindsbrook.webflow.io/foundation but other than that and the Read-Only, that’s all I’ve got as I haven’t pushed it live to the domain yet. Hope this helps–still learning the terminology here with Webflow and the forums. Thanks for your help.

Don’t worry about it. I only need a published version because it is easier to test.

Try this custom code.

<script>
      $(document).ready(()=>{
            let isMenuAlreadyOpen = false;
            $('.menu-button').on('click',()=>{
                  $('body').css("overflow",isMenuAlreadyOpen?"auto":"hidden")
                  isMenuAlreadyOpen = !isMenuAlreadyOpen
            })
      })
</script>
3 Likes

@Smith.S, this worked brilliantly–thanks a lot!

Question for you: if I outgrow this menu, either by adding more links or submenus, is there any way to allow them to scroll just the menu when it’s open? The problem I was having is when they go to scroll the menu when it’s open, it scrolls the main body content, as well, and just feels clunky. Ideally, if the menu overflows below, they could scroll it on the menu itself without being distracted by the main body movement, if that makes sense.

Really appreciate this, thank you. Saved me a lot of stress.

You can put an overlay on the content to lead user focus into a side menu.
Something like this: Collapsible sidebar using Bootstrap 4
(this example only means to emphasize what the overlay look like)

1 Like

@Smith.S, it’s a good thought. I’ll cross that bridge when I get there, I suppose. Thanks very much for your help with this.

No problem.

shameless plug :
If you happen to need some custom code or something, feel free to message me. :wink:

@Smith.S, I’ll keep you in mind. Out of curiosity, what would you have charged for something like this?

I charged 20-25 usd/hour.
For something like overlay scrollable side-menu I doubt it would take more than an hour.

The first task is usually a small task like this.
But I make more money by being there for my client when they need custom code or want to me to help debug a problem.

That’s a fair ask and makes sense to me. I’ll definitely keep you in mind. It would be nice to have a few resources to go to if I can’t get the solution somewhere. I’m a small business owner and cost is a concern with this stuff for me, but that rate is fair.

Amazing! Thanks for adding this. Works on desktop and mobile and with the same button for close and opening! Thank you for sharing @Smith.S

@Smith.S I have added your custom code to my site. On mobile, when I open my menu, the menu overlay now scrolls properly. However, when I close my menu, the page body won’t scroll properly. Would you be able to help with this? My website is www.sarchia.com. Thank you.

I have a lot of work this week so I can’t help you much.
but you can take a look at the body-scroll-lock library