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.
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
) the only thing that is missing is the prevention of scrolling.
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…
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.
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?
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.
Will test this a bit more. And thank you very much for your engagement here! Really appreciate it!
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.
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.
I think about creating a feature request but for now I’m happy the way it is.