Disable page scroll when lightbox is active

Ask the community
, , ,
5

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!

  1. → wixWindowFrontend.getBoundingRect()
  2. → 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…

:upside_down_face: :grin:

I am sure → YOU CAN’T !

https://forum.wixstudio.com/t/how-to-stop-background-page-scrolling-when-the-lightbox-is-active-in-editor-x/9537/3?u=code-ninja

2 Likes