I don't want user to scroll when any side bar is open. They should scroll once it closed.
I've use below code but its not working on android mobile device
$(document).bind('panelopen', function (e, data) {
$('body').css("overflow", "hidden");
});
$(document).bind('panelclose', function (e, data) {
$('body').css("overflow", "auto");
});
The
overflow
option never worked for me. I had to rely on thetouchmove
event of thebody
. I changed yourpageinit
event to this :So when the panel opens, the
overflow
property is changed, after which thetouchmove
event is bound tobody
. ThestopScroll
function, which prevents default action of our touch screen, is bound to thetouchmove
event of body.When the panel closes, you'll have to
unbind
thattouchmove
event frombody
to restore your scroll.Works on Galaxy S3, Xperia S, Nexus 4 phones and Nexus 7 tablet.
Here's the code at JSBin