Question

我一直试图让滚动条不显示在fancybox中。我在Fancybox inline to have no scrollbars and be 100% and 'fixed'尝试了解决方案但我无法让它发挥作用。

我正在工作的是http://home.nith.no/~setkin11/advancedsearc1.html 我想将大小设置为常量，滚动条在弹出时根本不显示。

脚本

 $(document).ready(function() {
        $('#smallAdvanced_container').bind('click', function(){
            var container = $('#advanced_container');
            if($('#advanced_container').is(':hidden')) {
                $('#advanced_container').show();
                $.fancybox.open([container]);
            }
            else {
                $('#advanced_container').hide();
                $.fancybox.open([container]);    
            }
        });
        //$('#advanced_container').fancybox();
    });

    $('#advanced_container').fancybox({
         type: 'html', 
         width: 410, 
         height: 620,
         autoSize : false, 
         autoCenter: false, 
         fitToView : false,  
         scrolling : 'no' 
    });

HTML

<div id="smallAdvanced_container">
    <img src="ribbon.png" alt="Search ribbon">
</div>

Answer 1

根据Jame的回答，但如果你设置overflow: auto !important，你会在需要时获得滚动条，而不是在你需要时。即：

.fancybox-inner {
  overflow: auto !important;
}

您还可以将此限制为仅使用特定css父选择器显示的特定类型的fancybox，例如：要仅影响显示iFrame内容的fancybox，请使用：

.fancybox-type-iframe .fancybox-inner {
    overflow: auto !important;
}

Answer 2

在我看来，好像您正在使用API一样，我不确定您是否可以在不更改插件代码的情况下执行此操作。

我知道一种CSS方式，但它必须使用！important，这有点像黑客。只需在CSS中包含以下内容

即可

.fancybox-inner {
  overflow: hidden !important;
}

fancybox2中没有滚动条，并且设置了大小

2 个答案: