Next Release
Roofco Joomla Template
Template dedicated to Roofing and construction, with 4 prebuilt websites for Joomla 5 and 6. Subscribe or renew now and be the first to get it when we launch it.
Forum
- Home
- Forum
- Template Support
- Premium Joomla Templates
- Construction: Scroll Issue Site / Offcanvas
Important - Hands Up!
- Please ask using the account with which you made the purchase or download of our products and in its respective category.
* ADD PRODUCT NAME IN START OF SUBJET
Construction: Scroll Issue Site / Offcanvas
- S
- spike Premium Member
- Topic Author 1 year 4 months ago #1
When open the off-canvas menu, sometimes it happens that accidentally come to the side area and scroll it instead of the menu items of the off-canvas menu. In the worst case, sometimes it can happen that the off-canvas menu is no longer scrollable at all and fixed, even though menu items are expanded and the menu should actually scroll.
Is it possbile to fix the page area behind it as standard (scrolling the page area is not even possible if open Offcanvas) so that Offcanvas scrolls in any case?
Please look at the video, if I expressed myself complicatedly:
Expired page link
Expired page link
Thx in Advance.
Is it possbile to fix the page area behind it as standard (scrolling the page area is not even possible if open Offcanvas) so that Offcanvas scrolls in any case?
Please look at the video, if I expressed myself complicatedly:
Expired page link
Expired page link
Thx in Advance.
Please Log in or Create an account to join the conversation.
- L
- leoalv Moderator
- 1 year 4 months ago #2
In the video you can see the correct way how both the offcanvas and the page should behave. Explanation:
Both the offcanvas and the body have their own scroll generated by the browser according to the height of their content, therefore both are scrollable independently. And human intuition makes that if you open the menu and it is only 50% of the width of the screen you have to act on it, and if the scroll has finished (up or down) the browser captures the mouse in the next element that has scroll which would be the page, for example if you are going down in the offcanvas and there is no more content down but you keep scrolling the browser captures it for the page, and if you want to go back it will continue to be captured, just stop and go back in the offcanvas and you will see that it is working on the offcanvas again.
Can it be changed? Of course, but it would be unnavigable when the links of the menu elements are #ids of sections in ONEPAGES.
If you don't use onepage and want to change the behavior you can try:
This will remove the scrolling of the page when offcanvas is open.
Both the offcanvas and the body have their own scroll generated by the browser according to the height of their content, therefore both are scrollable independently. And human intuition makes that if you open the menu and it is only 50% of the width of the screen you have to act on it, and if the scroll has finished (up or down) the browser captures the mouse in the next element that has scroll which would be the page, for example if you are going down in the offcanvas and there is no more content down but you keep scrolling the browser captures it for the page, and if you want to go back it will continue to be captured, just stop and go back in the offcanvas and you will see that it is working on the offcanvas again.
Can it be changed? Of course, but it would be unnavigable when the links of the menu elements are #ids of sections in ONEPAGES.
If you don't use onepage and want to change the behavior you can try:
Code:
.offcanvas-active .body-wrapper{max-height:100vh;overflow:hidden;}
Please Log in or Create an account to join the conversation.
- S
- spike Premium Member
- Topic Author 1 year 4 months ago #3
You saved my day! Thank you very much, works 200% !
Please Log in or Create an account to join the conversation.
Secure Payment
Use your cards with Paypal.