Utilize Cwicly's prevent scrolling?

General
1

I noticed that modals that are set to prevent scrolling get this attribute: data-preventpagescroll="true" I was wondering if there is a way to activate the scroll prevention that comes with Cwicly manually.

I want to to this because I have a div with many filters. On mobile devices I want to turn this div into a modal and also would like to disable the page scroll.

2

So I already tried to give my div this attribute but it didn’t work.

3

Can you provide more info on how you achieve that?
Cwicly offers a couple of ways to do it, so I want to find out which fits your case most.

4

I assume you need more information regarding the structure?

I try to give you more detail.
So I have many filters that are displayed on the left side of my query on desktop devices. These filters should be accessible via popup on mobile devices.
At the moment I use a button that adds the class “.filter-visible” to the filter wrapper div and makes it visible that way. So everything works perfectly fine (partly because of your help a few hours ago

:+1: :smiley: ) the only thing that is missing is the prevention of scrolling.

I tried code like this:

const showDialog = () => {
  const scrollY = document.documentElement.style.getPropertyValue("--scroll-y");
  const body = document.body;
  body.style.position = "fixed";
  body.style.top = `-${scrollY}`;
};
const closeDialog = () => {
  const body = document.body;
  const scrollY = body.style.top;
  body.style.position = "";
  body.style.top = "";
  window.scrollTo(0, parseInt(scrollY || "0") * -1);
};
window.addEventListener("scroll", () => {
  document.documentElement.style.setProperty(
    "--scroll-y",
    `${window.scrollY}px`
  );
});

In countless variations but there was always something that didn’t work very well (glitches).

5

I see.

How about adding overflow:hidden to the <body> when the div-modal is active, which you then would remove again when closing it?
Not sure about your specific requirements, but how about doing it with Cwicly Interactions?

If I recall correctly, this is planned as an option in Cwicly to achieve exactly this use case - without the necessity to duplicate the filters in a modal, popover, div, etc…

6

The overflow: hidden does not work properly. This way the page scrolls to the top every time you open the modal.

I just thought that maybe I can use the already working and installed solution to stop the scrolling that is applied to the Cwicly Modal Block.

Would be great if there will be a solution for this. Cause I really want to avoid duplicating my filters.

7

That’s exactly what the modal block does. It just adds this rule to the body when active.
It might be the case that other events like custom code, 3rd party plugins, etc. do interfere.
I’m not sure why it shouldn’t work otherwise.

This is block specific and only loads when an actual modal block is in place.
You can achieve the exact same behaviour by a simple interaction.

Not sure if there is a feature request for this yet - feel free to create one.
I think @Louis mentioned it in one of the lives, but never heard of it since.

8

No, there is more to that. You can check this file: /wp-content/plugins/cwicly/assets/js/cc-modal.min.js
In this file you see a lot of stuff related to scrolling.
Here is a good breakdown of this issue: Prevent Page Scrolling When a Modal is Open | CSS-Tricks - CSS-Tricks

That’s true and I tried to utilize it while having a modal on my page but I wasn’t able to do so.

9

I still don’t understand how this is related to your case.
Are you using a modal block for your filters or not?

Do you have a link to your site?
This is simple CSS and your issues are most likely user error.
Why should your page scroll when you toggle overflow:hidden on your body?
Are you adding a height to it, like in the example you referred to?

This is how it looks when a modal is active.
image

10

Nope, that’s the thing. I don’t use the modal because I want my filters to be accessible right next to the query on desktop.

The scrolling I referred to does not happen when using overflow: hidden on the body element, you are right. I got confused. This happens with some other css hack (fixed or something).
The issue with overflow hidden is that it does not work on iOS. On iOS you can scroll the body even with overflow: hidden.

11

I now tried it with overflow: hidden!important; and that seems to work at the moment for some reason. Maybe the issue with iOS is resolved by now. Thanks for guiding me back to the simplest solution. I didn’t bother to test this through because I knew this doesn’t work because some time ago I had the same issue and the only solution was the JavaScript from css-tricks.com.

Will test this a bit more. And thank you very much for your engagement here! Really appreciate it!

1 Like
12

I know there are some quirks with this specific case and iOS/Safari, but they are easy to work around in most cases. I don’t think it’s even common that they appear and probably show only up in some certain and rare scenarios.

Glad you found a way to make it work. It might be worth having a closer look at this. It might only be a single variable which makes that happen, so you can avoid that in the past.
I appreciate your kind words and can only encourage you to create a feature request to have this natively at some point in Cwicly.

1 Like
13

It could be that it is resolved for good anyway. The post from css-tricks is from 2019. I just tested this on an old iPhone – just to make sure I’m not crazy – and indeed it ignores the overflow hidden.

The JavaScript solution probably is just obsolet now.

I think about creating a feature request but for now I’m happy the way it is.

14

Incredible how much time I invested in this today just because I did not check if the simple solution works nowadays… :sweat_smile:

15

My recommendation here:

Create an interaction for your div-modal trigger button that adds a class to the body. Something like .filter-active

With that single class, you can target your body, like

body.filter-active {
   overflow: hidden
}

and your div-modal

body.filter-active .div-modal {
   //whatever your rules are, probably some transform stuff 
}

When closing the modal, you just want to remove the body class.

The only custom code would be the overflow:hidden for your body, since there isn’t the possibility to use Relative Styling, I guess.
Everything else, one is able to create visually.

With Cwicly, most stuff is possible, even with no- or low-code.
Next time, just pop up here earlier and before you waste hours :+1:

1 Like
16

With the addition of !important this is exactly how I set it up :slight_smile:

1 Like