Hi,
I want to make my body content not-scrolling when any modal etc. is active (off-canvas navi for example).
How that works in your Pro theme?
I have of course tried “Overflow: hidden;” for both HMTL and BODY elements but for some reason that seems not working?? I’m a bit confused! 
Thanks!
Howdy, @Hetcomp!
Thanks for writing in! The Modals and Off Canvas Elements in Pro do not stop scrolling while open at the moment. Adding overflow: hidden to the <html> and <body> elements will not work unless you have some way to target them uniquely while the Modal or Off Canvas is open. To do this, you would need to use JavaScript to detect when the Element is open and add a conditional class to the <html> and <body> elements and tie your overflow: hidden styles to that.
Hopefully this helps to point you in the right direction, cheers!
Thanks for your reply! I’m aware that it needs some JS and that wasn’t the actual problem. I’ve already tried this solution for example: Stop content scrolling behind modal
For me it seems reasonable, but didn’t work. However, then I tried just to prevent body scrolling without any modals, just the basic HTML elements and CSS, but that didn’t work either! What do you think about that?
Cheers!
Hi Henri,
The code from that thread will no longer due to the changes from the layout. But, I’ll provide the one that will work,
jQuery( function ($) {
$('.x-anchor-toggle[aria-haspopup="true"]').on('click', function() {
if ( $(this).attr('aria-expanded') == 'false' ) {
$('body, html').css('overflow' , 'hidden');
}
} );
$('.x-off-canvas-close, .x-modal-close, .x-modal-content-outer').on('click', function () {
$('body, html').css('overflow' , '');
} );
} );
Please note that we don’t provide support or cover code maintenance, I only provided this code as a sample or idea that it can be achieved. You’re free to change it in the future and maintain it.
Thanks!
Thanks @rad for the code, that makes absolutely sense and it’s very clear to me how it should work in principle! But for some reason the body content still just keep scrolling… I really have no idea why. 
As I told, that happens even by injecting “overflow: hidden” directly to the body styles, so the problem is not in the JS.
Hello Henri,
Please clear your plugin caches or at least temporarily deactivate LiteSpeed cache plugin first before doing another round of test.
If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support
Regards.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
