Fancybox 2.1.3 preventing iframe from haivng scrol

问题:

I am using fancybox.js version 2.1.3 to place external content into an iframe. I am doing this by placing the url followed by a div id (e.g. http://somesite.com#about), this seems to work however the problem is I have not found away to stop fancybox from scrolling. preventing scrolling is necessary since i will be placing several div ids on the same external page and then placing them in iframes with fancybox, and i do not want to give the viewer the ability to scroll down within the iframe to view other div ids 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',
    });
});

回答1:

You can disable the scrolling by using a helper as follows:

    iframe : {
        scrolling : 'no'
    }

回答2:

Why don't you load only the fragment you need rather than the whole document? In that way, you don't need to prevent the scrolling.

If that is an option, you would need to change the way you are loading the file ... a sort of ajax method would work better instead of iframe.

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

In order to achieve that, we would need to split the hash (#about) from the url to pass the proper format into the .load() method (notice the space between the url and the 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 whole file so scroll bars appear while the following only the 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 a different domain, subdomain, or protocol.

BTW, .on() requires jQuery 1.7+

回答3:

Very easy: just add

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

And the scroll bars are gone!

回答4:

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

Change:

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

into this:

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

Checked for Fancybox 2.1.5.