Fantasybox-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'
        });
    } 
});

您必须在.fancybox-inner和afterLoad上设置 css-property overflow ，因为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>