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

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