fancybox版本2出于任何原因显示#fancybox-inner
水平滚动条。即使我改变了它显示滚动条的框的大小。如何隐藏水平滚动条?
function display_dialog() {
$.fancybox.open({
href: '/ContactSubmission/',
type: 'ajax',
padding: 15,
openEffect: 'fade',
openSpeed: 'normal',
closeEffect: 'elastic',
closeSpeed: 'slow',
autoSize: true,
scrolling: 'auto',
helpers: {
title: {
type: 'float'
},
overlay: {
locked: true
}
},
afterLoad: function(){
$("#fancybox-frame").css({'overflow-x':'hidden'});
}
});
};
我尝试$("#fancybox-frame").css({'overflow-x':'hidden'});
仍然无效。
答案 0 :(得分:0)
我个人甚至不会编辑js来执行此操作,我会编辑CSS。
尝试
#fancybox-inner {
overflow-x: hidden;
}
(虽然我认为fancybox-inner通常是一个类,而不是一个ID,所以如果不起作用,请尝试.fancybox-inner)
答案 1 :(得分:0)
这是另一种可能性:
$.fancybox.open({
[...],
scrolling: 'auto',
afterLoad: function() {
this.wrap.find('.fancybox-inner').css({
'overflow-y': 'auto',
'overflow-x': 'hidden'
});
}
});
您必须在overflow
- 元素和.fancybox-inner
上设置css-property afterLoad
,因为beforeLoad
来自fancybox-property scrolling
的设置将设置一个可以覆盖你的。
答案 2 :(得分:0)
有时它会因花式盒的尺寸而发生。 例如,
$.fancybox({
href: '#reviseDiv',
width: 800 //the width of fancy box is 800 pixel
});
<div class="widget-content" style="display: none;width:800px;margin-left:30%;">
<div id="reviseDiv" style="width:750px;margin-left:5%">
//here width not exceed from width of fancy box
</div>
</div>