I want to disable browser scrolling when fancybox opened. And next code works:
helpers: {
overlay: {
locked: true
}
},
But on mobile devices window jump to top during fancybox opening. This behavior depends at locked: true param. How can I lock overlay and prevent jumping?
Different decisions, such as:
$('html').css('overflow', 'hidden')
or
$(document.body).bind('touchmove', function(e) {
e.preventDefault();
e.stopPropagation();
e.returnValue = false;
});
Works, but not in all mobile browsers!
I also had to deal with this issue and it has driven me mad. I tried nearly all options, searched all questions and answers on stackoverflow but nothing seemed to work with my ajax-lightbox. I always jumped to the top. Then I did the following:
$(".lightboxe-fancyboxWindow").fancybox({
type : 'ajax',
href : "<?php echo $_SERVER['PHP_SELF']; ?>",
ajax: {
type: "POST",
data: {
'data1' : information1,
'data2' : information2
},
},
autoSize: false,
width: '60%',
beforeShow : function() {
$("body").css({"overflow" : "hidden", "padding-right" : "17px"});
},
afterClose: function () {
$("html, body").removeAttr("style");
},
titleShow : false,
helpers : {
overlay : {
locked : false
},
title : null
},
});
What I did was to add overflow hidden on body tag and 17px
padding for the fake-scrollbar
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.