On Event Calendar popup screen does not scroll while screen behind it does

Ask the Community General Questions
1

Hello,

The website is here: dev.gesacarousel.com. When the popup opens for an event, the page behind the popup scrolls while the content in the popup does not. I’ve tried Chrome, Firefox and Edge and have the same behavior in each browser.

3

Hi there, @Parker_Hodge :waving_hand:

Apologies for the inconvenience!

We’ve fixed the issue with this code added to the Custom JS field on the Settings tab of your widget’s settings:

const callback = (mutationList) => {
  mutationList.forEach(({
    addedNodes
  }) => {
    const popup = [...addedNodes].pop();
    const popupScrollableWrapper = popup?.querySelector("[class*='Popup__PopupScrollableWrapper-sc']");
    if (!popupScrollableWrapper) {
      return;
    }

    popupScrollableWrapper.addEventListener("wheel", (event) => {
      event.stopPropagation();
    }, {
      passive: true
    });
  });
};

const observer = new MutationObserver(callback);
observer.observe(document.body, {
  childList: true
});

Please check your website and let me know if everything is fine now :slightly_smiling_face:

4

Thank you. And thank you for adding the code to the site for me. That is a step a lot of the developers don’t do for you. Nice job going above and beyond!

5

Awesome, a huge thank you for your kind feedback!

If anything else comes up, we’re always here to help :wink: