1

Fancybox JQueryプラグインを使用していますがhtml、bodyCSSプロパティが原因で問題が発生しています。現在、このoverflow-yプロパティはscroll、ページの長さを調整するジッターアニメーションを非表示にするためにに設定されています。

Fancyboxは2番目のHTML要素（私は思う）を呼び出しているので、呼び出されたときに2番目のスクロールバーが表示されます。これもまた、アニメーションや効果が不安定になります。

これを修正するためにFancyboxのとコールバックを使用しようとしていますが、いくつかの点で効果的であるよう beforeShowです。beforeClose

コールバックはbeforeShowシームレスに機能し、Fancyboxが呼び出されても、2番目のスクロールバーは表示されません。ただし、コールバックは元のbeforeCloseスクロールプロパティが返されるという意味で機能しますが、小さな「ブリップ」が発生して画面がジッターし、ボディのすべての要素が2番目のスクロールバーがあるかのようにサイズ変更/再形成されます。そもそも。

技術的には2つ目のスクロールバーがないため、なぜこれが発生しているのかわかりませんが、Fancyboxを閉じると発生したかのように動作します。変更できるCSSルール、またはこれを防ぐための別のコールバックはありますか？

私のFancyboxスクリプト：

 jQuery('.fancyboox').fancybox({
            fitToView   : false,
            width       : '90%',
            height      : '90%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none',
            beforeShow  : function() {
                $('body, html').css('overflowY','hidden');
            },
            afterClose   : function() {
                $('body, html').css('overflowY','auto');
            }
        });

同じ効果をエミュレートするデモ-http://jsfiddle.net/NVHWw/-気付くと思いますが、2番目のスクロールバーが表示され、ライトボックスを閉じるとすぐに消えます。

どうもありがとう、そう。非常に感謝しています。

4

1 に答える 1

4

次のようにロックhelpersを無効にするAPIオプションを追加するだけです。overlay

helpers: {
    overlay: {
        locked: false
    }
}

...beforeShowおよび/またはafterCloseコールバックの必要はありません。

JSFIDDLEを参照してください

于 2013-02-12T04:37:11.150 に答える