Fancybox 2.1.3 preventing iframe from scrolling scrollbars

Question

I am using fancybox.js version 2.1.3 to host external content in an iframe. I do this by placing a URL followed by a div id (e.g. http: //somesite.com#about ), this seems to work, but the problem is that I haven’t found it to stop the fancybox from scrolling . scrolling prevention is necessary, since I will place several div identifiers on the same external page and then put them in iframes with fancybox, and I do not want to give the viewer the ability to scroll down in the iframe to view other div identifiers on this external page.

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

You can disable scrolling using the helper as follows:

  iframe : { scrolling : 'no' } 

Answer 2

Why don’t you download only the fragment that you need, and not the entire document? This way you do not need to prevent scrolling.

If this is an option, you will need to change the way the file is loaded ... the look of the ajax method will work better than the iframe.

I suggest using jQuery .load() to pull out only the requested inner div referenced by its ID .... so if you call href="http://somesite.com#about" , for example, then we need to call $("#targetContainer").load("http://somesite.com #about");

To achieve this, we need to split hash ( #about ) into url in order to pass the correct format to the .load() method (note the space between url and hash ) ... so having this html

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

... this script should work:

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

See this working demo . The first link pulls the entire file, so scrollbars will appear, while the next only requested fragment.

NOTE Due to browser security restrictions, most Ajax requests are subject to the same origin policy ; The request cannot successfully retrieve data from another domain, subdomain, or protocol.

BTW, .on() requires jQuery .on()

Answer 3

Very easy: just add

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

And the scroll bars have disappeared!

Answer 4

You can simply edit the Fancybox file "jquery.fancybox.js".

Edit:

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

in it:

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

Checked for Fancybox 2.1.5.