Disable Scrolling when switch between breakpoints

Attributes
1

Hi :wave: Question about Disable ScrollingI used it for popup modal (Interactions), found an issue when switching screen between breakpoints > Interaction Modal is close (cause interactions is reload) > and no way to click on some triggers for enable scroll again

Is there a ready-made solution in Disable Scrolling Attributes code or will need to write custom code to fix it?

2

Hey @tregubov.design! I’m afraid there is no native solution for this issue yet. Custom code should be the way to go.

However, do let me know if you need any help by sharing a link to your site and going more into detail on the issue and the desired behavior.

3

Can you recommend a simple Custom code solution in this case?

4

Can you share a link and a quick loom on the issue? I’ll try to work this out for you

5

Hi, yes, here is:

>>Read-only Link<<

6

Hey @tregubov.design! Thank you so much for the video, this script should achieve what you are after while we fix the issue. I’ll forward the video to the team to see what they can do!

<script>
  const breakpoints = {
    small: '(max-width: 576px)',
    medium: '(min-width: 577px) and (max-width: 768px)',
    large: '(min-width: 769px) and (max-width: 992px)',
    extraLarge: '(min-width: 993px)',
  };

  function handleBreakpointChange(event) {
    if (event.matches) {
      document.querySelector('[fs-scrolldisable-element="enable"]').click();
    }
  }

  Object.entries(breakpoints).forEach(([breakpoint, mediaQuery]) => {
    const mediaQueryList = window.matchMedia(mediaQuery);
    mediaQueryList.addListener(handleBreakpointChange);
  });
</script>

Just add the code to the </body> part of the page custom code.

1 Like