我正在使用jQuery Fancybox进行弹出式注册表单here
我希望这张表格大小为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>
一定有一些我做错了但我无法弄清楚它是什么。我很感激这里有用的手。感谢。
答案 0 :(得分：51)
我遇到了与fancybox和iframe相同的问题，谷歌搜索解决方案并最终在这里。溢出：隐藏对我不起作用，但我发现fancybox允许你设置iframe滚动选项（相当于在iframe上设置“scrolling = no”属性），这解决了IE7中的问题更多优雅的方式：
$.fancybox({
'type' : 'iframe',
'scrolling' : 'no',
... and the rest of the parameters.
答案 1 :(得分：14)
听起来有点奇怪。一个丑陋的解决方案是使用css，overflow：hidden;
每当我使用fancybox时，滚动条都能正常工作。确保fancybox的内容没有设置另一个高度？
编辑： 查看了您的示例站点。似乎内容中有一些宽度设置比fancybox本身大。
答案 2 :(得分：11)
我为此苦苦挣扎，只是为了在Fancybox文档中找到答案。
如上所述，首先我认为禁用滚动就像这样容易：
$('.fancybox').fancybox({'type': 'iframe', 'scrolling': 'no', 'width': 500})
仅仅将'scrolling'选项设置为'no'是不够的。我必须在'iframe'选项中重复相同的操作，如下所示：
$('.fancybox').fancybox({
'type': 'iframe',
'scrolling': 'no',
'width': 500,
'iframe': {'scrolling': 'no'}
})
答案 3 :(得分：10)
只是想说马格努斯上面给出的回答是为我做的，但对于需要“溢出”的第二个“叠加”
helpers : {
overlay : {
css : { 'overflow' : 'hidden' }
}
}
答案 4 :(得分：9)
在测试了上述每个提示之后（并且在[{1}}处仍然有一些内联overflow: scroll导致无用的滚动条）并尝试了很多其他自己的解决方法，我摆脱了滚动条溶液：
.fancybox-inner答案 5 :(得分：7)
我遇到了同样的问题，经过反复试验，我发现你可以通过覆盖帧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才能生效。
答案 6 :(得分：6)
我遇到了类似的问题，当我在Fancybox选项中设置maxWidth时会出现垂直滚动条。
要解决问题，我必须设置
.fancybox-inner {
overflow: hidden !important;
}
并在Fancybox内容上设置固定宽度的CSS规则，而不是在Fancybox选项中指定maxWidth。如果我做了后者，Fancybox计算的内容高度有点太小 - 可能暗示为什么它首先放入滚动条。
答案 7 :(得分：4)
您需要将iframe选项放在其自己的上下文中，例如：
$(".someclass").fancybox({
type : 'iframe',
iframe : {
scrolling : 'no'
}
});
答案 8 :(得分：3)
我相信解决方法是设置
'autoDimensions' : false
然后内联内容的宽度和高度将与您将其设置为
答案 9 :(得分：3)
我知道这听起来有点奇怪，但是你们中的任何人都试图将表单页面正文标记的margin设置为0。
问题实际上非常简单，原因是默认情况下正文标记margin设置为8px（取决于浏览器），如果您只是将其设置为0则修复滚动条
我所拥有的js配置如下，并且在不改变fancybox的CSS的情况下运行良好。
$(".iframe").fancybox({
'autoScale' : false,
'autoDimensions' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
答案 10 :(得分：2)
添加iframe：{scrolling：'no'}作为选项
例如
$.fancybox({
href: 'yourUrl.html',
width: 800,
height: 415,
autoSize: false,
type : 'iframe',
iframe: {
scrolling : 'no',
preload : true
}});
答案 11 :(得分：1)
删除高度和宽度值周围的引号：
<script type="text/javascript">
$(document).ready(function() {
$("a#regForm").fancybox({
'titleShow' : false,
'autoscale' : true,
'width' : 450,
'height' : 700,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
答案 12 :(得分：1)
使用fancybox版本：2.1.5并尝试了所有不同的选项，并且这些选项都没有显示滚动条。
$('.foo').click(function(e){
$.fancybox({
href: $(this).data('href'),
type: 'iframe',
scrolling: 'no',
iframe : {
scrolling : 'no'
}
});
e.preventDefault();
});
所以在代码中进行了一些调试，直到找到了这个，所以它覆盖了我设置的所有选项，无法使用许多选项覆盖它。
if (type === 'iframe' && isTouch) {
coming.scrolling = 'scroll';
}
最终解决方案是使用CSS！重要的黑客。
.fancybox-inner {
overflow: hidden !important;
}
负责的代码行是：
current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling));
Fancybox曾经是一个可靠的工作解决方案，现在我发现只是不一致。实际上即使在购买开发商许可证之后也在辩论降级。如果你没有意识到你需要一个商业项目：https://stackoverflow.com/a/8837258/560287
，请在此处获取更多信息答案 13 :(得分：1)
对于IE和谷歌Chrome来说，这是唯一有用的东西，我认为这主要是因为.body.scrollHeight的东西，它在IE中运行得最好。我为Firefox添加了+30 ......
jQuery.fancybox({
href: href,
type: "iframe",
centerOnScroll: 'true',
scrolling: 'no',
width: 650,
'onComplete': function() {
jQuery('#fancybox-frame').load(function() {
jQuery('#fancybox-content').height(this.contentWindow.document.body.scrollHeight + 30);
});
}
});
答案 14 :(得分：1)
$(".various").fancybox({
fitToView : false,
width : '100%',
height : '100%',
maxWidth : 850,
maxHeight : 550,
fitToView : false,
padding : 20,
autoSize : true,
closeClick : true,
openEffect : 'none',
closeEffect : 'none',
overflow : 'hidden',
scrolling : 'no'
});
答案 15 :(得分：1)
在jquery.fancybox.js上，我编辑了这部分：
iframe : {
scrolling : 'no', // i changed this from 'auto' to 'no'
preload : true
},
答案 16 :(得分：1)
Fancybox 2.x至少有一个“叠加助手”，这对我来说至关重要。我在fancybox配置参数中添加了以下内容：
helpers : {
overlay : {
css : { 'overlay' : 'hidden' }
}
}
我曾尝试在CSS中设置它，但这不起作用，并且在游戏后期，例如在beforeShow事件中，但这导致了一个闪烁的条形码。这似乎没有任何障碍。
答案 17 :(得分：1)
我猜我也是同样的问题。它不是fancybox属性或CSS，而是我网站的主要css。
如果您有类似
的内容div {overflow:auto;height:auto;}
对于您的网站css中的可继承/ root，它会导致幻想框中的滚动条问题。使用ID和类删除并使您的HTML和CSS更精确
答案 18 :(得分：0)
这是另一个想法。我有
html { overflow-y: scroll; }
在我的主要CSS中，以防止居中的内容在需要或不需要滚动条的页面之间跳转。我尝试了以上所有内容来摆脱弹出窗口中的滚动条，直到我意识到这一点。一旦我将它关闭为弹出窗口，弹出窗口中的滚动条也消失了。因此，请确保您看到的滚动条实际上来自iframe，而不是来自内部页面。
答案 19 :(得分：0)
我的2美分，写
*{ margin:0; padding:0; }
在目标网页主css中，添加一个内容div，其中包含所有元素的高度尺寸，请勿触摸.js，listo，saludos
答案 20 :(得分：0)
修改197的行198和jquery.fancybox.css：
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: auto;
}
答案 21 :(得分：0)
我这样做是为了摆脱溢出（滚动条）......
在jquery.fancybox .... js文件的末尾有onStart，onCancel，onComplete等函数，它们都是空的......所以请继续填写onStart的大括号“ $（'body'）。css（'overflow'，'hidden'）“和onClosed”$（'body'）。css（'overflow'，'visible'）“......应该看起来像...... / p>
onStart:function(){$('body').css('overflow','hidden')},
onClosed:function(){$('body').css('overflow','visible')},
和平
答案 22 :(得分：0)
这里的答案提供了许多可能解决此问题的方法，但大多数方法不适用于带触摸屏的设备。我认为问题的根源来自源代码的这些代码：
if (type === 'iframe' && isTouch) {
coming.scrolling = 'scroll';
}
这似乎覆盖了fancybox初始配置设置的任何选项，并且只能在这些代码行运行后更改，即使用afterShow方法更改css。但是，所有这些方法都会导致明显的延迟/滞后，当您打开它时，您将能够看到滚动条消失。
我建议的解决方法是从第880行的主源文件jquery.fancybox.js中删除这些行，因为我没有理由强迫滚动条到带触摸屏的设备上。
请注意，这不会立即使滚动条消失，只是阻止它覆盖scrolling配置选项。因此，您还应该将scrolling: 'no'添加到您的fancybox初始配置中。
答案 23 :(得分：-1)