gbruzzo
commented
5 years ago Hello there
a further development - it turns out the solution above results in unpleasant visual glitches in Safari desktop and iOS (the page jumping back and forth) - the problems does not occur in other browsers, but we could not mitigate it at all.
I therefore went back to the bodyScrollLock js package (https://www.npmjs.com/package/body-scroll-lock). I am pleased to say it can be made to work, out of the box.
to do so
- enqueue it in functions.php
wp_enqueue_script( 'body-scroll-lock', WPBF_CHILD_THEME_URI . '/js/bodyScrollLock.js', false, WPBF_CHILD_VERSION, true );
- add its logic to the child-site.js as in
(function($) {
/********* this code sorts out the scrolling body issue*****************/
const targetElement = document.querySelector(".wpbf-mobile-menu-container");
//Open Offcanvas
$('.wpbf-mobile-menu-off-canvas .wpbf-mobile-menu-toggle').click(function() {
$('body').addClass('offcanvas');
bodyScrollLock.disableBodyScroll(targetElement);
});
//Close Offcanvas when clicking on close button
$('.wpbf-mobile-menu-off-canvas .wpbf-close').click(function() {
bodyScrollLock.enableBodyScroll(targetElement);
$('body').removeClass('offcanvas');
});
//Close Offcanvas when clicking anywhere on the window
$(window).click(function() {
if ( $('body').hasClass('offcanvas') ) {
bodyScrollLock.enableBodyScroll(targetElement);
$('body').removeClass('offcanvas');
}
});
})( jQuery );Note that I had to add / remove a further class to body, because active-mobile has been already removed by the time the code checks. Integration of this plugin into mobile-offcanvas.js would probably allow this issue to be circumvented.
The following code is to be added to style.css
.wpbf-mobile-menu-container {
-webkit-overflow-scrolling: touch;
overflow: scroll;
}
.wpbf-mobile-menu-container nav {
overflow-y: initial;
}
The code checks for webkit-overflow-scroll on the target element, so it must be there. overflow has to scroll. The overflow-y:auto in the child css has to be neutered.
This seems to work really quite well now. I would therefore suggest you look at this package more closely if you have the time.
Giacomo Bruzzo
mapsteps
Hello There,
Here is a possible solution for the 'offcanvas scrolling bubbling up to body scrolling' issue that has been known to plague all mobile webkit browsers, and which seems to show up in your framework as well. This results in quite unpleasant user experiences (the bottom of the offcanvas jumps revealing the body below scrolling - not nice). For Android browsers, it is my understanding, that it is usually enough to set overflow:hidden whenever an 'offcanvas is open' class is active (you have active-mobile in body). iOS requires different approaches
We tried different approaches (pure css as above with added position:fixed, a touchmove preventDefault/stoppropagation approach associated with the offcanvas container etc. They either completely failed or partially failed).
The approach below, based on
It borrows the open / close triggers from your mobile canvas.js
In Site-Child.js (or better if integrated into mobile-offcanvas.js, more conditions required to make it compatible with hamburger) enter:
var scrollposition = {x: window.scrollX, y: window.scrollY};
//Open Offcanvas $('.wpbf-mobile-menu-off-canvas .wpbf-mobile-menu-toggle').click(function() { scrollposition = {x: window.pageXOffset, y: window.pageYOffset}; $('body').css({height: window.innerHeight, 'overflow':'auto'}); $('html').css('margin-top', scrollposition.y * -1).addClass('offcanvas-active'); });
//Close Offcanvas $('.wpbf-mobile-menu-off-canvas .wpbf-close').click(function() { $('body').css({height: '', overflow:''}); $('html').css('margin-top', '').removeClass('offcanvas-active'); window.scrollTo(scrollposition.x, scrollposition.y); });
$(window).click(function() { if ( $('html').hasClass('offcanvas-active') ) { $('body').css({height: '', overflow:''}); $('html').css('margin-top', '').removeClass('offcanvas-active'); window.scrollTo(scrollposition.x, scrollposition.y); console.log(scrollposition.y); } });
in style.css enter
html.offcanvas-active { position: fixed;
}
.wpbf-mobile-menu-container nav { -webkit-overflow-scrolling: touch; overflow:scroll; }
.wpbf-mobile-menu-off-canvas .wpbf-mobile-menu-container { position: fixed; top: 0; bottom: 0; width: 320px;
z-index: 999999; }
That will take care of most issues.
You can see it at work here https://www.newrarenoise2.rarenoise.com
Deep regards for your beautiful framework, Mr Vongries.
Giacomo Bruzzo