How to prevent scroll behind pop up!

Publishing help General
1

Hello there,

I wonder if anyone can tell me about using the overfllow scroll. If a create my own pop up over my design and need to have that section scrollable it will scroll everything behind that section / the whole site. Is there a way to prevent this?

Thanks

Daniel

2

I know you can manipulate page scroll through JS. I see that issue all the time on sites with modal windows. It seems like that should be the default behavior for all modal pop ups. I don’t know how you would set it up though. It is way beyond my skill and understanding. Maybe an ninja would know? - @bartekkustra ?

3

Hey, yeah I’ve been thinking about this… You can’t, unfrtunatelly prevent scrolling for bg and allow it for foreground (modal). At least I don’t see an option yet. Maybe @danro could give a hint here?

4

I think I remember reading about that. I think that they accomplish that sort of trickery for discrete DOM elements with advanced parallax scrolling libraries like Skrollr or ScrollMagic only because all of those elements are set to fixed to begin with. Then all of the movement is manipulated using JS. It gives the illusion that for pinning and unpinning elements would be possible, but I am sure it is much more complex than my tiny brain can handle.

5

Hi guys, this can be accomplished by setting the overflow property of the <html> tag.

Here’s a quick example showing how you might do this using custom code:

<script>

var $html = $(document.documentElement);
var $modal = $('.my-custom-modal');

function showModal() {
  $html.css('overflow', 'hidden');
  $modal.show().css('overflow', 'auto');
}

function hideModal() {
  $html.css('overflow', '');
  $modal.hide();
}

$('.modal-open-button').on('click', showModal);
$('.modal-close-button').on('click', hideModal);

</script>

Along with the above custom code, I would then create two buttons in Webflow and give them the classes:

“modal-open-button” and “modal-close-button”

Both buttons should have the following URL set in Link Settings

javascript:void(0);

Hope that helps!
-Dan

4 Likes
6

hi @danro,

i tried out this but cant get it to work. Am i suppose to use this o the modal?

cheers

7

Hi all, I’ve updated the example above to illustrate how you might connect the custom code to buttons in Webflow.

1 Like
8

Hi All-

I would like the user to be able to scroll on the pop up mobile, and not be able to scroll on the background. Is this possible? Would I have to implement the custom code, or could I add this in the settings. Any advice that you could provide would be fantastic. Thank you so much! I really appreciate it!

9

Hello.

I am also interested in this, but do not understand that the purpose of the buttons (modal open/close) would be. I would just like to be able to open the itens in the “Works” section without the background scrolling.

I have implemented a low-quality workaround by placing an in-page link in the X button (close) back to the Works section.

Thanks!