jQuery - Fancybox:但我不想要滚动条!

Question

我使用jQuery的fancybox一个弹出报名表这里

我希望表单的大小为450px×700px,但无论我设置高度和宽度,我都会得到滚动条:

<script type="text/javascript">
    $(document).ready(function() {
        $("a#regForm").fancybox({
            'titleShow'  : false,
            'autoscale' : true,
            'width'  : '450',
            'height'  : '700',
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
            }); 
        });
    </script>

必须有一些我做错了但我无法弄清楚它是什么.我很感激这里有用的手.谢谢.

Answer 1

我遇到了与fancybox和iframe相同的问题,谷歌搜索解决方案并最终在这里.溢出:隐藏对我不起作用,但我发现fancybox允许你设置iframe滚动的选项(相当于在iframe上设置"scrolling = no"属性),这解决了IE7中的问题更多优雅的方式:

$.fancybox({
    'type'        : 'iframe',
    'scrolling'   : 'no',
... and the rest of the parameters.

Answer 2

听起来有点奇怪.一个丑陋的解决方案是使用css,overflow:hidden;

每当我使用fancybox时,滚动条都能正常工作.确保fancybox的内容没有设置另一个高度？

编辑:查看您的示例站点.好像在内容中设置了一些比fancybox本身更大的宽度.

Answer 3

我为此苦苦挣扎,只是为了在Fancybox文档中找到答案.

如上所述,首先我认为禁用滚动就像这样容易:

$('.fancybox').fancybox({'type': 'iframe', 'scrolling': 'no', 'width': 500})

但是,仅仅将"滚动"选项设置为"否"是不够的.我必须在'iframe'选项中重复相同的操作,如下所示:

$('.fancybox').fancybox({
  'type': 'iframe', 
  'scrolling': 'no', 
  'width': 500, 
  'iframe': {'scrolling': 'no'}
})

Answer 4

只想说Magnus上面给出的回答是为我做的,但对于需要"溢出"的第二个"叠加"

helpers : {
  overlay : {
    css : { 'overflow' : 'hidden' }
  }
}

Answer 5

检测每一个上面的提示(并且仍然引起一些在线无用的滚动条后overflow: scroll在.fancybox-inner),也尝试了很多其他的变通办法自己的,我摆脱这种解决方案的滚动条:

    afterShow: function(){
        this.inner.css({
            overflow: 'auto' // or 'no'
        });
    }

Answer 6

我遇到了同样的问题,经过反复试验,我发现你可以通过覆盖帧css类来避免滚动条.

你可以这样做:

iframe.fancybox-iframe {
    overflow:hidden;
}

JS配置:

jQuery(document).ready(function(){
    $("a.various").fancybox({
        'width'             : 'auto',
        'height'            : 'auto',
        'autoScale'         : false,
        'autoDimensions'    : false,
        'scrolling'         : 'no',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe'  
    }); 
});

注意:您的fancybox框类型必须iframe为此才能生效.

Answer 7

我有类似的问题,当我在Fancybox选项中设置maxWidth时出现垂直滚动条.

为了解决我必须设置的问题

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

并在Fancybox内容上设置固定宽度的CSS规则,而不是在Fancybox选项中指定maxWidth.如果我做了后者,Fancybox计算的内容高度有点太小 - 可能暗示为什么它首先放入滚动条.

Answer 8

您需要将 iframe 选项放在它自己的上下文中，例如：

$(".someclass").fancybox({
    type : 'iframe',
    iframe : {
        scrolling : 'no'
    }
});