Question

我使用fancybox.js版本2.1.3将外部内容放入iframe。我这样做是通过放置url后跟一个div id（例如http://somesite.com#about），这似乎工作但问题是我没有找到阻止fancybox滚动。防止滚动是必要的，因为我将在同一外部页面上放置几个div ID，然后将它们放在带有fancybox的iframe中，我不想让观众能够在iframe中向下滚动以查看其他div div外页。

//fancybox window script
$(document).ready(function() {
    $(".various").fancybox({
        type        :'iframe',
            scrolling   : 'no',
        maxWidth    : 800,
        maxHeight   : 400,
        fitToView   : true,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
    });
});

Answer 1

您可以使用帮助程序禁用滚动，如下所示：

    iframe : {
        scrolling : 'no'
    }

Answer 2

为什么不加载您需要的片段而不是整个文档？这样，您就不需要阻止滚动。

如果这是一个选项，您需要更改加载文件的方式......一种ajax方法可以更好地替代iframe。

我建议使用jQuery .load()来仅提取其div引用的请求内部ID ....所以如果你的目标是href="http://somesite.com#about"，那么我们需要致电$("#targetContainer").load("http://somesite.com #about");

为了实现这一目标，我们需要将hash（#about）与url分开，以便将正确的格式传递给.load()方法（请注意url和hash之间的空格...所以有这个html

<a class="various" href="http://somesite.com#about">about</a>

......这个脚本应该有效：

// open only selected div (hash)
var thisHref, thisHash;
$(".various").on("click", function() {
    thisHref = this.href.split("#")[0];
    thisHash = this.href.split("#")[1];
    targetContent = $("<div />").load(thisHref + " #" + thisHash);
    $.fancybox(targetContent, {
        maxWidth: 800,
        maxHeight: 400,
        fitToView: true,
        width: '70%',
        height: '70%',
        autoSize: false,
        closeClick: false,
        openEffect: 'none',
        closeEffect: 'none'
    }); // fancybox
    return false; // prevent default
}); // on

请参阅 this working DEMO 。第一个链接拉取整个文件，因此滚动条出现，而下面只显示请求的片段。

注意：由于浏览器安全限制，大多数“Ajax”请求都受 same origin policy 的约束;请求无法成功从其他域，子域或协议中检索数据。

BTW，.on()需要jQuery 1.7 +

Answer 3

非常简单：只需添加

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

滚动条消失了！

Answer 4

您只需编辑Fancybox文件＆＃34; jquery.fancybox.js＆＃34;。

变化：

iframe : {
                scrolling : 'auto',
                preload   : true
            }

进入这个：

iframe : {
                scrolling : 'no',
                preload   : true
            }

检查Fancybox 2.1.5。

Fancybox 2.1.3防止iframe拥有滚动条

4 个答案: