Fancybox 2.1.3阻止iframe滚动条

Question

我正在使用fancybox.js版本2.1.3将外部内容放入iframe。 我这样做是通过在URL后面加上div ID（例如http：//somesite.com#about ）来完成的，这似乎可行，但是问题是我还没有找到阻止fancybox滚动的方法。 防止滚动是必要的，因为我将在同一个外部页面上放置多个div ID，然后使用fancybox将其放置在iframe中，并且我不想让查看者能够在iframe中向下滚动以查看此其他div id外部页面。

//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()仅提取其ID引用的所请求的内部div ...。因此，例如，如果您定位的是href="http://somesite.com#about" ，则我们需要调用$("#targetContainer").load("http://somesite.com #about");

为了实现这一点，我们需要将url的hash （ #about ）拆分为适当的格式，并将其传递给#about .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

参见此工作演示 。 第一个链接拉动整个文件，因此出现滚动条，而第二个仅显示请求的片段。

注意 ：由于浏览器的安全限制，大多数“ Ajax”请求都受相同的原始策略约束； 该请求无法成功从其他域，子域或协议检索数据。

顺便说一句， .on()需要jQuery 1.7+

Answer 3

非常简单：只需添加

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

滚动条不见了！

Answer 4

您可以简单地编辑Fancybox文件“ jquery.fancybox.js”。

更改：

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

到这个：

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

检查了Fancybox 2.1.5。