Streaming live at 10am (PST)

Prevent Body Scroll Not Working Now

Hey Webflow Forum!
Working on a client site https://catsmeowvets.webflow.io
Read-only site: https://preview.webflow.com/preview/catsmeowvets?utm_medium=preview_link&utm_source=designer&utm_content=catsmeowvets&preview=89e72763ef2d42eedacb9927adb6a2fd&mode=preview

I added watched the video from @PixelGeek preventing body scrolling when my full-page menu is open. Since my menu button needs to be clicked once to open and again to close, I found code that counts clicks menu button in the comments and it worked like a charm on all browsers… until a couple of days ago. Not sure what the change was that broke it, but it still works on Firefox and Edge – not Chrome.

Any suggestions???


Here is my site Read-Only: https://preview.webflow.com/preview/catsmeowvets?utm_medium=preview_link&utm_source=designer&utm_content=catsmeowvets&preview=89e72763ef2d42eedacb9927adb6a2fd&mode=preview

Hi @BarbPritchard :wave:

I highly recommend this implentation for stopping scrolling when something else is open. For me it works across all devices and browsers too.

Hope this helps.

Thank you @magicmark! I appreciate your help!

I just discovered the code that I have in place is actually working on Chrome, I just needed to disable the Editor by clearing cache/cookies.

1 Like

@magicmark Hi Mark! I wonder what’s your goto method of dealing with the issue when you need to click the same object to both open and close something (the most common is obviously hamburger menu). Do you replace the trigger area with the second trigger?

@dram You can add 1st click and a 2nd click to the same element, so just make sure the 2nd clicks actions reverse the 1st clicks actions exactly :smiley: That way it works like a toggle.

1 Like

I’d jump in circles if there was a button that automatically inverts the keyframes for the reverting interaction :webflow_heart:

No I mean the custom code that you linked is working as an “onClick” function. But what do you do to make sure that second click on the same element is calling closeDialog()?

That button is only shown on the modal and only closes the modal. There is no second click for that button, did I understand you correctly?

I had to use some custom JS with WF for a similar case.
It was a mobile menu that I wanted to close when the user clicked anywhere outside the modal.
If anyone’s interested in the code I can provide that

The code from the css-tricks article uses two triggers - the first runs showDialog(), while the second runs closeDialog(). Since 95% of use cases for mobile hamburger nav uses only one trigger (hamburger icon itself) I asked Mark to share his goto way of handling this situation.

2 Likes

Yeah, that would be nice for sure.

I usually duplicate the initial interaction, then just reverse it, at least that way you know you have all the affected elements and it’s just a case of renaming the interaction to close and re-ordering it slightly.

2 Likes

Ah sorry, I see what you meant. I haven’t done it that way with a Webflow project as it’s always been two buttons.

In the event listener you could use an if statement to figure out what state the modal is in, if it’s visible, then close it, otherwise open it.

2 Likes

That should do it!
Sometime i will dig into Ix2 and figure out how you guys do it!

Do you know if unchecking the minify js option leaves the function names intact?
Its a mess to read ha!

Yes, minify gets rid of whitespace and long function names to improve the speed and performance. Disabling it will let you see the longer names and formatted code, but could slow down larger projects and increase bandwidth.

Thanks, I’d really only use it to check out your library :slight_smile: