2

我正在使用 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',
    });
});
4

4 回答 4

3

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

    iframe : {
        scrolling : 'no'
    }
于 2013-03-12T10:13:50.427 回答
1

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

如果这是一个选项，您将需要更改加载文件的方式......一种 ajax 方法会比 iframe 更好地工作。

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

为了实现这一点，我们需要将hash( )#about从url.load()urlhash

<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+

于 2012-11-29T07:12:50.517 回答
1

非常简单：只需添加

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

滚动条不见了！

于 2014-07-23T18:00:40.450 回答
0

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

改变：

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

进入这个：

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

检查 Fancybox 2.1.5。

于 2015-07-15T22:13:18.323 回答