Hi there,
I’d like to know if there’s a way to stop content from scrolling behind Modals and Off-Canvas menus!
The problem is when scrolling through my off-canvas menu on mobile for example, the content behind the menu scrolls as well, which causes some troubles… The same issue with Modals, as while trying to scroll through the modal’s content the main site content behind it scrolls as well!
Thanks a lot!
Hello There,
Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.
Cheers.
Hi there,
Unfortunately, it is not possible to do so. This is how the system is coded and changing the behavior will introduce new problems.
Thank you for your understanding.
But I didn’t understand, so no need to thank me!
I’m not sure how it isn’t possible to stop content from scrolling behind my menu while scrolling through the menu itself! That’s very annoying.
Besides I’m not sure what other new problems you’re talking about?
A bit more explanation would be appreciated. Perhaps even a solution.
Thank you.
Hi there,
If you wish to stop scrolling then there is a need for a trigger, something that’s going to initialize upon opening of the modal and off canvas. And it’s only possible with javascript which could fail, which also means that there will be the time that your site will be unusable since you’ll not able to scroll if the trigger fails to reset. And since it’s done through the builder which there are many different setups then there is no permanent way to implement this as of now.
Though, I like to see the problems you’re experiencing as of now due to the scrolling. What device you’re testing it on? And please provide a video recording. I checked it and I don’t see any scrolling problem, maybe I just overlooked them.
Thanks!
So as you can see scrolling through this menu on mobile is really annoying and makes the menu kinda shaky as the content behind scrolls as well (have no idea why it does)!
This is an Android LG device (not sure if it makes a difference), and using the latest version of Chrome.
Hi there,
Ah, it’s not shaking, and it will be the same even if you successfully disable the scrolling. The main issue is the browser address where it pops in and out which changes the height of the viewport, which results for the page layout moving. Though, I’ll still forward this as a feature request.
Thanks.
Thanks a lot iam!
I thought if I was able to disable the background from scrolling while scrolling through the menu then the browser address bar won’t move and there will be no issue!
Thanks anyway, looking forward 
You’re most welcome!
Is there a solution meanwhile?
I have the same issue with X Theme, cornerstone and a modal content element.
If scroll on the modal then the background body schools too.
This makes the modal content element unusable.
Thank you,
Hannes
Hi Hannes,
Thank you for reaching out to us. As Rad mentioned here it’s only possible with JavaScript which could fail, which means that there will be the time that your site will be unusable since you’ll not able to scroll if the trigger fails to reset.
I tried scrolling on off-canvas content container and the body doesn’t scroll, the body only scrolls when the cursor is outside the off-canvas container which doesn’t cause any issue.
Thanks!
Please try this:
Open the page on a smartphone, in my case: iPhone SE.
Navigate to the first section “Team”.
Click on the three blue dots to open the modal content
Scroll down.
Scroll down again, just to see if there is more content.
Close the modal window.
See that the background content has been scrolled down - you are not longer in the “Team” section.
That is the issue, that makes the modal content element unusable for professional sites.
Hope you know now what I mean.
Thank you,
Hannes
Hi @salilou,
Your provided site is behind a coming soon page, please provide the password as well. And again, there is no available solution as of yet.
Thanks!
Oh yes, here it is.
Hey @salilou,
When you scroll down the Modal’s content way pass the content length, the browser will detect it and scroll the page as well. This is why when you close the modal, you are no longer in the Team’s section. This is how browser reacts to the scrolling events. This is beyond the theme’s capability. Stopping this scrolling events would mean to recode or at least hijack the browser’s source code in order to override this behaviour.
Hope this explain it briefly.
What happens technically is clear.
But it is not user friendly.
Maybe your programmers will some day be able to solve this.
Maybe by setting the background body overflow to hidden, while the modal content is open - this would prevent the background from being scrolled.
Or maybe the smartphone browser producer some day change their code!
Thank you very much so far and have a nice weekend.
Hannes
Hi Hannes,
This is part of the core so we couldn’t really modify it, all we could do is add this as a feature request. For the meantime, you could add this to Theme Options > JS according to your preferred implementation.
jQuery( function ($) {
$('.x-anchor-toggle[aria-haspopup="true"]').on('click', function() {
if ( $(this).attr('aria-expanded') == 'false' ) {
$('body').css('overflow' , 'hidden');
}
} );
$('.x-off-canvas-close').on('click', function () {
$('body').css('overflow' , '');
} );
} );
This would apply overflow hidden, but note that it would also change the possible height so when the popup is closed, the scroll position may not the same as well.
Thanks!
Could you staff reconsider this problem? I believe you could handle it with the current setup you have.
Hi Courtney,
This is a closed thread, and I would suggest you create a new thread and describe the problem you are having for further assistance.
Thanks