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。