Lightbox Scroll Lock on Mobile

Design help General
1

I’m using Webflow’s Lightbox element to showcase a gallery.

On my iPhone (not on my desktop’s inspect element), when the Lightbox modal pops up, the back is still scrollable so when you try to scroll horizontally (to go to the next picture in the gallery), the background scrolls as well. I’ve been trying to figure out how to lock it but since it’s Webflow’s own element, I can’t access the CSS or add an Id for anything.

Here’s the gallery (at the bottom of the page):
https://www.thesobelist.com/vip-services/private-transportation

Here is my site Read-Only: Webflow - Access The Top Miami Nightclubs in Miami

2

Hey @luisevoke, have a look at Attributes from @Finsweet

This should help you out. Let me know.

3

Hey @choreus thanks for your reply!

That worked great! However, now when I exit the Lightbox the scroll is still disabled. I guess it would make sense to add the “enable” attribute to the close button but I can’t access it since it’s a native Webflow element. Any advice?

Thanks!

4

@luisevoke, you can add the following custom code to make it work automatically. It targets the Webflow class .w-lightbox-hide. The display settings change when opening the lightbox. This works with When visible from @Finsweet. [Example 3]

<!-- [Attributes by Finsweet] Disable scrolling -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-scrolldisable@1/scrolldisable.js"></script>

<script>
const lightbox = document.querySelector('.w-lightbox-hide');
lightbox.setAttribute('fs-scrolldisable-element', 'when-visible');
</script>

Let me know if this works for you.

5

It didn’t work :sweat_smile: It’s still on there in case you want to check the read-only.

However, I also tried targeting the Lightbox element itself with the “disable” attribute (mimicking the custom attribute feature) just to see if it would work through the custom code as well and it didn’t either. I copied and pasted the bottom portion to the body and top to the head.

Also one last thing, I did notice that when scroll is disabled, the horizontal navigation of the pictures when the Lightbox opens up is also disabled, is there any way to exclude that as well?

Thanks again for all your help!