jQuery - Fancybox：但我不想要滚动条！答案

【问题标题】：jQuery - Fancybox: But I don't want scrollbars!jQuery - Fancybox：但我不想要滚动条！
【发布时间】：2010-02-15 19:14:53
【问题描述】：

我正在使用 jQuery Fancybox 弹出注册表here

我希望表单的大小为 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>

一定是我做错了什么，但我不知道是什么。我会很感激这里的帮助。谢谢。

【问题讨论】：

标签： jquery fancybox

【解决方案1】：

我在使用 fancybox 和 iframe 时遇到了同样的问题，在谷歌上搜索了一个解决方案并最终来到了这里。溢出：隐藏对我不起作用，但是我发现fancybox允许您设置iframe滚动的选项（相当于在iframe上设置“scrolling = no”属性），这解决了IE7中的问题更多举止优雅：

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

【讨论】：

这对我来说非常有效。在 IE 中看到滚动条，但在 Chrome 中没有。谢谢！

【解决方案2】：

在测试了上述所有提示（并且仍然有一些内联 overflow: scroll .fancybox-inner 引起的无用滚动条）并尝试了许多其他自己的解决方法之后，我用这个解决方案摆脱了滚动条：

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

【讨论】：

这是唯一为我做的事情。
这个！我也喜欢这样可以将配置保留在 fancybox 选项中，并且不需要任何额外的 CSS。

【解决方案3】：

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

每当我使用 fancybox 时，滚动条都能正常工作。确定fancybox的内容没有设置其他高度？

编辑：查看了您的示例站点。似乎在内容中设置了一些比花式框本身更大的宽度。

【讨论】：

【解决方案4】：

使用 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 !important hack。

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

负责的代码行是：

current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling));

Fancybox 曾经是一个可靠的工作解决方案，现在我发现除了不一致之外什么都没有。实际上，即使在购买了开发人员许可证后，现在仍在争论降级。如果您没有意识到您需要一个用于商业项目的更多信息，请点击此处：https://stackoverflow.com/a/8837258/560287

【讨论】：

【解决方案5】：

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

如上所述，首先我认为禁用滚动会像这样简单：

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

不过，仅将“滚动”选项设置为“否”是不够的。我不得不在“iframe”选项中重复同样的事情，就像这样：

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

【讨论】：

这在fancybox 1.3.0 中成功了。我认为答案会随着版本号的变化而变化。
这似乎是一个解决方案有效的彩票。对我来说就是这个。我觉得引导程序是问题的一部分，但我不在乎。这解决了它。

【解决方案6】：

另一种选择是更改overflow：

body {
    overflow: hidden;
}

在 iframe 的 HTML 中。

【讨论】：

【解决方案7】：

只是想说马格努斯上面的回答是为我做的，但是对于需要“溢出”的第二个“覆盖”

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

【讨论】：

这确实成功了。我觉得这个问题的公认答案并不是最终出现在此页面上的人们正在寻找的答案。

【解决方案8】：

我也遇到过同样的问题，经过反复试验，我发现您可以通过覆盖 frame 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 才能生效。

【讨论】：

【解决方案9】：

我遇到了类似的问题，当我在 Fancybox 选项中设置 maxWidth 时出现垂直滚动条。

为了解决这个问题，我必须设置

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

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

我相信解决这个问题的方法是设置

'autoDimensions' : false

那么内联内容的宽度和高度将与您设置的一样

【讨论】：

【解决方案12】：

我知道这听起来有点奇怪，但是你们有没有人尝试将表单页面正文标记的 margin 设置为 0。

问题其实很简单，原因是body标签margin默认设置为8px（取决于浏览器），如果你把它设置为0，那么它会修复滚动条。

我的js配置如下，在不改变fancybox的css的情况下运行良好。

$(".iframe").fancybox({
    'autoScale'         : false,
    'autoDimensions'    : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'              : 'iframe'
});

【讨论】：

【解决方案13】：

添加 iframe: { scrolling : 'no' } 作为选项

例子

$.fancybox({
href: 'yourUrl.html',
width: 800,
height: 415,
autoSize: false,
type : 'iframe',
iframe: {
scrolling : 'no',
preload   : true
}});

【讨论】：

【解决方案14】：

删除高度和宽度值周围的引号：

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

【讨论】：

【解决方案15】：

我猜同样的问题。这不是 fancybox 属性或 CSS，而是我网站的主要 CSS。

如果你有类似的东西

div {overflow:auto;height:auto;}

对于您网站 css 中的可继承/根目录，它会导致花哨的框中出现滚动条问题。使用 ID 和类删除 HTML 和 CSS 并使其更加精确

【讨论】：

【解决方案16】：

Fancybox 2.x 至少有一个“叠加助手”，这对我来说是关键。我将以下内容添加到我的 fancybox 配置参数中：

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

我曾尝试在 CSS 中设置它，但没有奏效，并且在游戏后期，例如在 beforeShow 事件中，但导致闪烁条。这似乎很顺利。

【讨论】：

这是overflow: hidden，而不是overlay...。

【解决方案17】：

在 jquery.fancybox.js 上，我编辑了这部分：

iframe : {

    scrolling : 'no', // i changed this from 'auto' to 'no'
    preload   : true
},

【讨论】：

【解决方案18】：

$(".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'
});

【讨论】：

【解决方案19】：

这是唯一适用于 IE 和 Google 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);
    });
  }
});

【讨论】：

【解决方案20】：

这是另一个想法。我有

html {  overflow-y: scroll; }

在我的主要 CSS 中防止居中内容在需要或不需要滚动条的页面之间跳转。我尝试了以上所有方法来摆脱弹出窗口中的滚动条，直到我意识到这一点。一旦我只为弹出窗口关闭它，弹出窗口中的滚动条也消失了。因此，请确保您看到的滚动条实际上来自 iframe，而不是来自内部页面。

【讨论】：

【解决方案21】：

我的 2 美分，写

*{ margin:0; padding:0; }

在您的目标页面主 css 中，添加一个包含所有元素高度大小的内容 div，不要触摸 .js、listo、saludos

【讨论】：

【解决方案22】：

编辑197 和198 的行jquery.fancybox.css：

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: auto;
}

【讨论】：

【解决方案23】：

我这样做是为了摆脱溢出（滚动条）...

在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')},

和平

【讨论】：

【解决方案24】：

此处的答案提供了许多可能解决此问题的方法，但大多数方法不适用于带有触摸屏的设备。我认为问题的根源在于源头的这几行代码：

if (type === 'iframe' && isTouch) {
    coming.scrolling = 'scroll';
}

这似乎覆盖了由 fancybox 初始配置设置的任何选项，并且只能在这些代码行运行后更改，即使用 afterShow 方法更改 css。但是，所有这些方法都会导致明显的延迟/滞后，您将能够看到滚动条在您打开时消失。

我建议的解决方法是从主源文件jquery.fancybox.js 的第 880 行附近删除这些行，因为我认为没有理由将滚动条强制到带有触摸屏的设备上。

请注意，这不会立即使滚动条消失，它只是阻止它覆盖scrolling 配置选项。因此，您还应该将scrolling: 'no' 添加到您的fancybox 初始配置中。

【讨论】：