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

非常に簡単: 追加するだけ

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

そして、スクロールバーがなくなりました！

于 2014-07-23T18:00:40.450 に答える
1

ドキュメント全体ではなく、必要なフラグメントのみをロードしてみませんか? そうすれば、スクロールを防ぐ必要はありません。

それがオプションである場合は、ファイルのロード方法を変更する必要があります... iframeの代わりに一種のajaxメソッドがうまく機能します。

jQuery を使用して、その ... によって参照される.load()要求された内部のみをプ​​ルすることをお勧めします。したがって、たとえばターゲットにしている場合は、呼び出す必要がありますdivIDhref="http://somesite.com#about"$("#targetContainer").load("http://somesite.com #about");

hashこれを実現するには、 ( #about) を から分割してurl、適切な形式をメソッドに渡す必要があります (と の.load()間のスペースに注意してください) ... この htmlurlhash

<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

この動作する DEMOを参照してください。最初のリンクはファイル全体をプルするため、スクロール バーが表示され、次のリンクは要求されたフラグメントのみが表示されます。

注: ブラウザーのセキュリティ制限により、ほとんどの "Ajax" リクエストは同一オリジン ポリシーの対象となります。要求は、別のドメイン、サブドメイン、またはプロトコルからデータを正常に取得できません。

ところで、.on()jQuery 1.7 以降が必要です

于 2012-11-29T07:12:50.517 に答える
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 に答える