fancybox-2水平滚动条关闭

Question

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'});仍然没有工作。

Answer 1

我个人甚至不会编辑js来做这个，我会编辑CSS。

尝试

#fancybox-inner {
    overflow-x: hidden;
}

（虽然我认为fancybox-inner通常是一个类，而不是一个ID，所以如果它不起作用，请尝试.fancybox-inner）

Answer 2

这是另一种可能性：

$.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的设置可以覆盖你的。

Answer 3

有时它会由于花式盒的尺寸而发生。例如，

$.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>