Scroll Body disabled but the page is scrolling

How To
1

I have a popup with a form and the Body Scroll is turned off in template setting.
But when the popup is visible, the page scrolls.
The problem is critical, as the form on the popup has a datepicker that scrolls together with the page!

The page:
https://biezoender.avar.com.ua/eten-in-biezoender/
Popup is triggered with a click on red button.

Popup setup:

popup scroll
popup scroll1912×872 172 KB

2

It’s because you’re hijacking the normal scroll by using the smooth scroller, it prevents bricks from being able to pause the scroll. Overflow hidden won’t work like it usually would.

We ran into a similar issue with our modal element in BricksExtras and had to add a separate solution to account for users using this type of smooth scroll, to ensure it would definitely pause it, but I don’t believe this has been added with the native Bricks popups.

Disabling the smooth scrolling would be the quickest solution.

3

How do you disable this entirely inside bricks?

4

I would be also interestet in how you achieved it @wplit

5

Is there any solution for this when using smooth scroll?

6

Here is a JS solution.
Replace ‘.your-modal-class’ with your modal class or ID.

<script>
/*Modal html no scroll*/
document.addEventListener('DOMContentLoaded', () => {
  const offcanvases = document.querySelectorAll('.your-modal-class');

  if (offcanvases.length === 0) return;

  const toggleOverflow = () => {
    const anyOpen = Array.from(offcanvases).some(offcanvas =>
      offcanvas.classList.contains('brx-open')
    );
    document.documentElement.style.overflow = anyOpen ? 'hidden' : '';
  };

  const observer = new MutationObserver(toggleOverflow);

  offcanvases.forEach(offcanvas => {
    observer.observe(offcanvas, { attributes: true, attributeFilter: ['class'] });
  });
});
</script>