jQuery - Fancybox：但我不想要滚动条！
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2268330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Fancybox: But I don't want scrollbars!
提问by forrest
I am using jQuery Fancybox for a popup registration form here
我在此处使用 jQuery Fancybox 作为弹出式注册表单
I would like the form to come up at the size of 450px by 700px but no matter what I set the height and width at I get scrollbars:
我希望表单的大小为 450 像素 x 700 像素，但无论我如何设置高度和宽度，我都会得到滚动条：
<script type="text/javascript">
$(document).ready(function() {
$("a#regForm").fancybox({
'titleShow' : false,
'autoscale' : true,
'width' : '450',
'height' : '700',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
There must be something I am doing wrong but I can't figure out what it is. I would appreciate a helpful hand here. Thanks.
一定是我做错了什么，但我无法弄清楚它是什么。我将不胜感激。谢谢。
采纳答案by dale
Sounds a bit wierd. an ugly solution is to use css, overflow:hidden;
听起来有点怪。一个丑陋的解决方案是使用 css, overflow:hidden;
Whenever I use fancybox, the scrollbars work correctly. sure that the content oc the fancybox is not setting another height?
每当我使用fancybox 时，滚动条都能正常工作。确定fancybox 的内容没有设置另一个高度？
Edit: Viewed your example-site. Seems like there is some width beeing set in the content that is larger than the fancybox itself.
编辑：查看您的示例站点。似乎在内容中设置了一些比fancybox本身大的宽度。
回答by ylebre
I had the same problem with fancybox and an iframe, googled for a solution and ended up here. The overflow: hidden did not work for me, however I found out that fancybox allows you to set the option for the iframe scrolling (equivalent to setting "scrolling=no" attribute on the iframe), which fixes the problem in IE7 in a more graceful manner:
我在fancybox和iframe上遇到了同样的问题，用谷歌搜索了一个解决方案，最后到了这里。溢出：隐藏对我不起作用，但是我发现fancybox允许您设置iframe滚动的选项（相当于在iframe上设置“scrolling=no”属性），它更修复了IE7中的问题优雅的方式：
$.fancybox({
'type' : 'iframe',
'scrolling' : 'no',
... and the rest of the parameters.
回答by Pirkka Esko
I struggled quite a bit with this, only to find the answer within the Fancybox documentation.
我为此苦苦挣扎，只是在 Fancybox 文档中找到了答案。
As hinted above, first I thought it would have been as easy as this to disable scrolling:
如上所述，首先我认为禁用滚动会像这样简单：
$('.fancybox').fancybox({'type': 'iframe', 'scrolling': 'no', 'width': 500})
Just setting the 'scrolling' option to 'no' was not enough, though. I had to repeat the same thing in the 'iframe' option, like this:
但是，仅将“滚动”选项设置为“否”还不够。我不得不在“iframe”选项中重复同样的事情，像这样：
$('.fancybox').fancybox({
'type': 'iframe',
'scrolling': 'no',
'width': 500,
'iframe': {'scrolling': 'no'}
})
回答by Benjamin
Just wanted to say Magnus' answer above did it for me, but for the second "overlay" that needs to be "overflow"
只是想说 Magnus 上面的回答对我来说是这样的，但是对于需要“溢出”的第二个“覆盖”
helpers : {
overlay : {
css : { 'overflow' : 'hidden' }
}
}
回答by larsbo
after testing every of the above tips (and still having useless scrollbars caused by some inline overflow: scrollat .fancybox-inner) and also trying a lot of other own workarounds, i got rid of the scrollbars with this solution:
检测每一个上面的提示（并且仍然引起一些在线无用的滚动条后overflow: scroll在.fancybox-inner），也尝试了很多其他的变通办法自己的，我摆脱这种解决方案的滚动条：
afterShow: function(){
this.inner.css({
overflow: 'auto' // or 'no'
});
}
回答by reyBorn
I have face the same problem and after times of trial and error, I found out that you can avoid scrollbars by overriding frame css class.
我遇到了同样的问题，经过反复试验，我发现您可以通过覆盖框架 css 类来避免滚动条。
You can do like this:
你可以这样做：
iframe.fancybox-iframe {
overflow:hidden;
}
JS configuration:
JS配置：
jQuery(document).ready(function(){
$("a.various").fancybox({
'width' : 'auto',
'height' : 'auto',
'autoScale' : false,
'autoDimensions' : false,
'scrolling' : 'no',
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
Note: Your fancybox box type must be an iframefor this to take effect.
注意：您的fancybox 框类型必须是aniframe才能生效。
回答by user1157749
I had a similar problem, with vertical scrollbars appearing when I set a maxWidth in the Fancybox options.
我有一个类似的问题，当我在 Fancybox 选项中设置 maxWidth 时出现垂直滚动条。
To get around the problem I had to set
为了解决我必须设置的问题
.fancybox-inner {
overflow: hidden !important;
}
and set a fixed width CSS rule on the Fancybox content rather than specifying a maxWidth in the Fancybox options. If I did the latter, Fancybox's calculated height for the content was slightly too small - probably hinting at why it was putting in scrollbars in the first place.
并在 Fancybox 内容上设置固定宽度的 CSS 规则，而不是在 Fancybox 选项中指定 maxWidth。如果我选择后者，Fancybox 计算出的内容高度稍微太小了——这可能暗示了它首先放置滚动条的原因。
回答by JRT
You need to put the iframe option in it's own context eg:
您需要将 iframe 选项放在它自己的上下文中，例如：
$(".someclass").fancybox({
type : 'iframe',
iframe : {
scrolling : 'no'
}
});
回答by NightFalL
I believe the solution to this is to set
我相信解决这个问题的方法是设置
'autoDimensions' : false
then the width and height for inline content would be as you set it to be
那么内联内容的宽度和高度将与您设置的一样
回答by Scott Hugh
I know this sounds a bit weird but have any of you tried to set the marginof the form page body tag to 0.
我知道这听起来有点奇怪，但是你们中的任何人是否尝试margin将表单页面正文标记的 设置为 0。
The problem is actually pretty simple, the reason is that the body tag marginby default is set to 8px(depending on browser) and if you just set it to 0 then it fixes the scrollbar.
问题实际上很简单，原因是 body 标签margin默认设置为8px（取决于浏览器），如果您只是将其设置为 0，则它会修复滚动条。
The js configuration I have is as follows and it works well without changing the css of fancybox.
我的js配置如下，在不改变fancybox的css的情况下运行良好。
$(".iframe").fancybox({
'autoScale' : false,
'autoDimensions' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
