Fancybox 2.1.3防止haivng滚动条中的iframe

我使用fancybox.js版本2.1.3将外部内容放入iframe。 我这样做是通过放置url后跟一个div id（例如http：//somesite.com#about ），这似乎工作但问题是我还没有找到停止fancybox滚动。 防止滚动是必要的，因为我将在同一外部页面上放置几个div id，然后将它们放在iframes中使用fancybox，我不想让观众能够在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()来仅提取其ID引用的请求内部div ….所以如果你的目标是href="http://somesite.com" ，那么我们需要调用$("#targetContainer").load("http://somesite.com #about");

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

 about 

…这个脚本应该工作：

 // open only selected div (hash) var thisHref, thisHash; $(".various").on("click", function() { thisHref = this.href.split("#")[0]; thisHash = this.href.split("#")[1]; targetContent = $("
").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 

看到这个有用的DEMO 。 第一个链接拉动整个文件，因此滚动条出现，而下面只显示请求的片段。

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

BTW， .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。