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

Question

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

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

score 51 · Accepted Answer

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

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

score 14 · Accepted Answer

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

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

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

score 11 · Accepted Answer

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

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

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

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

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

score 10 · Accepted Answer

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

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

score 9 · Accepted Answer

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

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

score 7 · Accepted Answer

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

score 6 · Accepted Answer

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

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

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

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

score 4 · Accepted Answer

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

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

score 3 · Accepted Answer

我相信解决方案是设置

'autoDimensions' : false

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

score 3 · Accepted Answer

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

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

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

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

score 2 · Accepted Answer

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

例子

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

如果你有类似的东西

div {overflow:auto;height:auto;}

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

score 1 · Accepted Answer

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

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

我曾尝试在 CSS 中设置它，但这不起作用，并且在游戏后期，例如在 beforeShow 事件中，但这导致了一个闪烁的条。这似乎工作顺利。

score 1 · Accepted Answer

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

iframe : {

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

使用 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

score 0 · Accepted Answer

这是另一个想法。我有

html {  overflow-y: scroll; }

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

score 0 · Accepted Answer

我的 2 美分，写

*{ margin:0; padding:0; }

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

和平

score 0 · Accepted Answer

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

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

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

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

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

score -2 · Accepted Answer

-2

另一种选择是更改溢出：

body {
    overflow: hidden;
}

在你的 iframe 的 HTML 中。

于 2015-05-24T13:45:16.280 回答

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

24 回答 24

Related

Reference