0

各ページの幅が本質的に同じであるため、「短い」ページでは移動しないように、スタイルシートに次のように設定しています。html { overflow-y:scroll; }

fancybox v2.1.3 を使用する場合、fancybox の長い iframe ページでスクロールバーが 2 つ表示されるのを防ぐために、以下を使用します。

$(".modal").fancybox({
            width   : '520',
            height  : 'auto',
            fitToView   : false,
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            beforeShow: function(){
            $("html").css({'overflow-y':'hidden'});
            },
            afterClose: function(){
            $("html").css({'overflow-y':'visible'});
            },
            helpers : {
                overlay : {
                    css : {
                        'background' : 'rgba(255, 255, 255, 0.9)'
                    }
                }
            }
        });

ファンシーボックスが起動している間、スクロールバーをオフにする上記の次の点に注意してください。

beforeShow: function(){
    $("html").css({'overflow-y':'hidden'});
},
afterClose: function(){
    $("html").css({'overflow-y':'visible'});
},

これは一種のトリックです-これが作成する問題は、Fancyboxオーバーレイが開くと、overflow-y要素を非表示にしたため、背景全体が右にシフトし、その後fancyboxページを閉じると再びシフトすることですオーバーフローyをオンに戻しているので。かわいくない。

このシフトの動きを止める CSS の変更があることは知っていますが、これは上記の beforeShow 関数によって上書きされます。

body.fancybox-lock{
    overflow:visible !important;
    margin-right:auto !important;
}

両方を持つことはできませんか？

ファンシーボックスポップアップで静的な背景を持つことができるようですが、長いページの場合はダブルスクロールバーを使用するか、単一のスクロールバーで背景をシフトします

これに対する回避策はありますか?

4

2 に答える 2

3

問題を正しく理解している場合は、Fancyboxの構成に次のオプションを追加することで、Fancyboxのオーバーレイロック機能を無効にできます。

helpers : {
    overlay : {
        locked : false
    }
}

html { overflow-y:scroll; }そうすれば、競合することなく使用できます。

欠点は、ユーザーがたとえばマウスホイールをスクロールした場合に、ページがFancyboxオーバーレイの下をスクロールするようになることです。

于 2013-02-20T06:07:50.140 に答える