fancybox-2 水平滚动条关闭答案

【问题标题】：fancybox-2 horizontal scrollbar offfancybox-2 水平滚动条关闭
【发布时间】：2014-01-02 17:30:03
【问题描述】：

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'}); 还是不行。

【问题讨论】：

当你打开盒子时你有scrolling: 'auto' 。您是否尝试将其设置为scrolling: 'hidden' ？我不熟悉fancybox，但如果它将它添加为内联样式，它将覆盖您的afterLoad css。作为最后的手段，您也可以尝试在 afterLoad css 中添加 '!important'。
你设置了scrolling: 'auto'，但我猜应该是scrolling: 'no'

标签： jquery css fancybox fancybox-2

【解决方案1】：

我个人什至不会编辑 js 来执行此操作，我会编辑 CSS。

试试

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

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

【讨论】：

【解决方案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，因为 beforeLoad 将设置来自 fancybox-property scrolling 的设置，并且可以覆盖您的设置。

【讨论】：

【解决方案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>

【讨论】：

是的！这正是我的问题。谢谢节省我的时间