Automatic secondary scroll when opening popup

Ask the Community General Questions
1

When opening a popup, the scroll feature scrolls the main page in the background, not the popup that has more information.

1 Like
5

Hi there and welcome to the Community, @user29936 :waving_hand:

We’ve fixed the issue with the script added to the Custom JS field on the Settings tab:

let scrollY = 0;
let locked = false;
let popupWheelAttached = false;

function lockScroll() {
  if (locked) return;
  locked = true;

  requestAnimationFrame(() => {
    scrollY = window.scrollY;
    document.documentElement.style.setProperty('--scroll-y', `-${scrollY}px`);
    document.documentElement.classList.add('lock-scroll');
    document.body.classList.add('lock-scroll');
  });

  enablePopupScroll();
}

function unlockScroll() {
  locked = false;
  document.documentElement.classList.remove('lock-scroll');
  document.body.classList.remove('lock-scroll');
  window.scrollTo(0, scrollY);
}

const enablePopupScroll = () => {
  if (popupWheelAttached) return;
  popupWheelAttached = true;

  document.addEventListener(
    "wheel",
    (e) => {
      const popup = document.querySelector('.eapps-timeline-f537b82e-5839-48d0-ab3f-10afceb2ef32-custom-css-root [class*="Popup__PopupWrapper-sc"]');
      if (!popup) return;

      if (popup.contains(e.target)) {
        e.stopPropagation();
        return;
      }

      e.preventDefault();
    },
    { passive: false, capture: true }
  );
};

const observer = new MutationObserver(() => {
  const popup = document.querySelector('.eapps-timeline-f537b82e-5839-48d0-ab3f-10afceb2ef32-custom-css-root [class*="Popup__PopupWrapper-sc"]');
  if (popup) lockScroll();
  else unlockScroll();
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

And this code was added the Custom CSS field on the Settings tab of your widget’s settings:

/* Lock Scroll */
.global-styles,
html.lock-scroll,
body.lock-scroll {
  position: fixed !important;
  top: var(--scroll-y) !important;
  width: 100% !important;
  overflow: hidden !important;
}

Please check your website and let me know if it’s fine now!

We’ve also noticed that you’ve added a script snippet to the Custom JS field. If you were trying to resolve this issue with this script, you can remove it from the widget :slightly_smiling_face:

1 Like