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