Deactivate scroll behind disclaimer

Hi there,

I want to prevent users from scrolling behind a fixed disclaimer screen until they click “I am 21 or older”. I tried hiding and showing the animation behind it, but the transition from the disclaimer to the intro “while scrolling” animation must be seamless. Look at the site, and you’ll understand: scrolling before clicking on the “I am 21” may cause the brand reveal to past before we even see it.

Huge Thanks in advance!

Here is my site Read-Only: Webflow - NimbusNectar

hi @Pierre-Etienne_Poul1 here is covered what you aer asking for. (eg. check section with modal)

I believe that tis forum has already several solutions as it is common request.

Hi Stan!

Thank you for your answer.

Yup, I’m well aware of the overflow property. I guess my question was more about “how to temporarily set overflow to none”, but only until the user has clicked the disclaimer”.

Also, since I need the disclaimer to transition seamlessly to a “while scrolling animation” positioned behind, anything messing with the scroll length can potentially affect the first frames of the said animation, which obviously is also a problem.

That is why I pointed you into modal section where is example how to add click listeners to interact with.

I do not understand your concept. You want disable scroll when disclaimer is open but you also want disclaimer transition while page scrolling. This doesn’t make sense to me.

Anyway if CSS doesn’t do th job you can use javascript to do what you need and there are sources on internet if you use keywords like “lock scroll javascript” etc.

1 Like

Thanks! Will def check these resources.

Just to clarify my intention, it is about something other than having a direct transition from the disclaimer div to the “while scrolling” animation behind it. It’s more about having that animation start exactly at 1%, and it seems that messing with the overflow settings of a sticky div wrapped into a 200VH Div (the scroll trigger) somehow messes with the timing.