Streaming live at 10am (PST)

Disable Scroll when 1/2 page modal window is opened


#1

Hi guys,

Starting a little mockup for a client & I can’t get the rest of the site to stop scrolling when the “Book A Table” modal window is opened. I guess I could use JS for this but I’d rather do it natively in webflow if possible. I’ve got overflow hidden on the modal window which holds it in place but the rest of the site scrolls down as well.

Any suggestions would be greatly appreciated :slight_smile:

Best,
Will


Live Site - http://thecharlesstreettap.webflow.io/
Share Link - https://preview.webflow.com/preview/thecharlesstreettap?preview=435aada35f9bae7ba67382b77da053f6


#2

add another click trigger to the interaction, that opens the half page modal. Set the full site DIV to 100VH, so it will not move any more. Of course release it when closing the modal.


#3

if you are referring to the website scrolling when a modal is visible…
that’s normal js.

To change that… you need to use js - to hide / show the scrollbar.

But that creates a visual effect where the background screen will shift horizontally
due to the scrollbar being removed or added.

After seeing it… I chose just to leave it as is… with the scroll bar always visible.

Only to get around the screen shift is to create a div where the scroll bar is…
and activate it (with js) when you remove the scroll bar - then deactivate it when the scroll bar is visible.

I’ve done it. Don’t really remember the code… but it’s possible. Just a PIA to do.


#4

@lissym

You’re an absolute hero… how did I not think of that!?!

<3