如何防止fancybox-2后面的页面滚动
如何防止fancybox-2后面的页面滚动
提问于 2013-03-26 14:57:28
我们使用fancybox2来显示图像。一切运行正常，但当fancybox中显示较大的图像时，后面的页面会滚动到顶部。在关闭fancybox之后，用户必须向下滚动回到打开该框的位置。fancybox2站点上的示例没有显示这种行为。我找不到，让这一切发生的区别在哪里。
fancyOptions = {
type: 'image',
closeBtn: false,
autoSize: false,
scrolling: 'no',
type: 'image',
padding: [10,10,10,10],
beforeLoad: function(){
this.title = getTitle(this);
this.href = $(this.element).closest('a').attr('href');
},
helpers: {
overlay: {
css: {
'background': 'rgba(0, 0, 0, 0.7)'
},
},
title: {
type: 'inside'
}
}
};我们在require.js中使用fancybox2作为一个模块。.fancybox()调用位于$(document).ready块中。
那里有两个滚动条，我藏了一个css
.fancybox-overlay {
overflow: hidden !important;
}回答 9
Stack Overflow用户
发布于 2013-07-04 05:14:22
显然，当显示图片时，Fancybox会将body元素上的CSS属性overflow更改为hidden。这会使背景回滚到顶部。您所要做的就是注释掉stylesheet jquery.fancybox.css中.fancybox-lock部分中的overflow: hidden !important;行。
Stack Overflow用户
发布于 2014-04-09 16:32:50
这对我来说很好用：
在facnybox初始化中添加跟随函数
beforeShow: function(){
$("body").css({'overflow-y':'hidden'});
},
afterClose: function(){
$("body").css({'overflow-y':'visible'});
}示例：
$(".fancyBoxTrigger").fancybox({
maxWidth : 820,
maxHeight : 670,
fitToView : false,
width : 760,
height : 580,
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
padding : 10,
closeBtn : false,
beforeShow: function(){
$("body").css({'overflow-y':'hidden'});
},
afterClose: function(){
$("body").css({'overflow-y':'visible'});
},
helpers : {
overlay : {
opacity: 0.4,
locked: false
}
}
});我希望它能为你工作。
Stack Overflow用户
发布于 2013-07-02 09:25:15
这对我很有效：
$.fancybox({
scrolling : 'hidden',
helpers: {
overlay: {
locked: true
}
});希望它能有所帮助:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15631124
复制相关文章
相似问题
腾讯云开发者
