I am customizing a lightbox to be used as a product modal.
When the lightbox is open and the product information is displayed, you’re able to scroll the page content behind the lightbox. I want to disable this.
How can I do this using Wix Studio?
I took a look and it seems if you click on the overlay, it will select the page and you can then set the overflow behavior to be hide which disables scrolling. I made a gif with the general steps you can see here.
It looks a bit jumpy on the preview but you can see it works really smooth on this site.
Hi Rob,
Thank you so much for taking a look.
I am however afraid that this does not seem to fix the issue I am facing.
When I take a look at your attached gif en the website link. I see that the webpage behind the lightbox is still scrollable.
What I am looking for is a way to block all input incl. scrolling on everything on the website except for the open lightbox.
I have tried to apply your solution to my site, but that also does not give the desired result.
Sorry 
No worries and apologies as I’m unable to recreate it as well on my end now on the live site, or I mixed up the editor with it as I was testing it. I think on the editor, it might lock in so as to not move it out of the way but on testing and retesting, I haven’t found a way to do so. I reached out and asked someone I know so I’ll keep you posted if they reply with a solution.
Thanks for understanding though.
1 Like
Here, a little present for you…
import wixWindowFrontend from 'wix-window-frontend';
$w.onReady(()=> {scrollLock(5000);});
function scrollLock(duration) {
wixWindowFrontend.getBoundingRect().then((windowSizeInfo) => {
let scrollX = windowSizeInfo.scroll.x;
let scrollY = windowSizeInfo.scroll.y;
const targetScrollX = scrollX;
const targetScrollY = scrollY;
let scrollInterval = setInterval(() => {
wixWindowFrontend.scrollTo(targetScrollX, targetScrollY);
}, 1);
setTimeout(() => {
clearInterval(scrollInterval);
}, duration);
});
This is my simple SCROLL-LOCKER, try to implement it into your own SETUP.
How does it work?
Well, Wix do provide the Window-API …
import wixWindowFrontend from 'wix-window-frontend';
Which includes 2 modules you need to achieve your wished function!
- → wixWindowFrontend.getBoundingRect()
- → wixWindowFrontend.scrollTo()
And your last ingridient to make your dream come true would be a self generated function, like shown above and your Scroll-locker is already ready to be used.
In this simple example, the locker do lock your scrolling on page for 5 secodns!
You can modify this of course and you also can change the code to make the unlocking based on other EVENTS/TRIGGERS, for example when closing the light box you send data back to the page (a simple data-command like {page: unlock}, reading this command on your page directly after closing or opening the lightbox. Oh i think you wanted to lock on Lightbox-open → also no problem!!! → change the LOCKER-CODE!
I did test it only on a plain site (not tested with a lightbox) but out of my point of view = absolutely doable!
You have always to be tricky when working with → WIX <–, but in most cases there is always a → WORK-AROUND.
Try to scroll withing first 5 seconds if you can on this site…
I am sure → YOU CAN’T !
1 Like
Hi, @Levi_Visser !!
I believe it’s probably possible to dynamically lock page scrolling by using a custom element. If you create CSS styles like overflow: hidden inside the custom element and then append them to the page’s head using something like document.head.appendChild(someCss);, the page might become non-scrollable. 
So, if you can detect when a lightbox is opened and then use something like setAttribute() to send a signal to the custom element, you might be able to control whether the Wix page can scroll or not at any given time. I haven’t actually tried this myself, so I can’t say for sure—but I think it’s possible. 
1 Like
And now try to make your toughts come true
Now i want to see a working code from you
Little challange for you.
Thanks a lot for your detailed response.
I have implemented in on my site, the same way as you’ve shown and that does indeed work.
However, when I try to alter it so that it works in line with opening and closing the lightbox, it does not work anymore. I have tried changing the code with ChatGPT (I am a C# and C++ Game developer, so web development of any kind is magic to me haha, but I’m trying).
Sadly, with the help of AI I am also not able to figure out how to link it to the lightbox.
What ChatGPT eventually wants me to do is change the overflow style of the document body. But it seems that document is also not available in Wix Studio.
@onemoretime
This is a task for → ONE-MORE-TIME <–, surely he is interested into that.
If not, i can help you later. But first try on your own. 
All you have to do is to change the → LOGIC ←
Instead of starting the SCROLL-LOCKER directly for a specific amount of time, now you need to change the code…
- STEP-1: So it do not start immediately.
- STEP-2: Starts only when → LIGHTBOX ← opens (can be a click onto a button).
- STEP-3: Stops only when → LIGHTBOX ← has been closed.
All this is absolutely doable! (take your time)
Maybe I do look like I’ve got too much time on my hands… 
But, it’s a feature I might actually need someday, so I figured I’d build it just in case.
// The code has been deleted. Sorry ...
2 Likes
Anoth…another tas, tas, task …? ＼(꒪ཀ꒪」∠)_
＼(꒪ཀ꒪」∠)＼(꒪ཀ꒪」∠)＼(꒪ཀ꒪」∠)_ 
“Uuugh… taskuugh…”
No, I believe that checking the new episode of One Piece Anime every Sunday is the most important task for me right now. And today is already Saturday, right? Anyone can clearly see how hard I’ve worked this week in this forum.
I often get inspiration for design and other creative ideas from watching latest anime, so this is definitely a top-priority task for me. I, assume, so…
I’ve worked hard this week … , so it’s okay if I just keep scrolling scrolling through … my recorded anime … for a little while…
scrolling scrolling through …
1 Like
How did you exactly implement this code?
After reading your response, I realized that someone who’s not very familiar with code might try to use it—and that made me start to feel it could be risky. If you understand how the code works and what it’s doing, that’s one thing. But if not, using it could result in unexpected issues like pages where scrolling is completely disabled for no clear reason.
So, with that in mind, I’ve decided to delete the code. I’m really sorry.