[英]How lock fancybox overlay without jumping to the top?
I want to disable browser scrolling when fancybox opened. 我想在打开fancybox时禁用浏览器滚动。 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. 我几乎尝试了所有选项,搜索了关于stackoverflow的所有问题和答案,但似乎对我的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
. 我要做的是为body fake-scrollbar
添加隐藏在body标签上的溢出和17px
填充。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.