13

Fancybox は正常に読み込まれ、すべてが希望どおりに開きますが、問題はバックグラウンドで発生します。ボックスが読み込まれ、ボックスの通常の位置に戻ると、ページ全体がちょうど 8 ピクセル右にずれていることがわかります (そして気がかりです)。閉鎖。

会社のファイアウォールの背後にある開発サーバー上にあるため、サイトにリンクできません。

次のスクリプトを使用しています: Fancybox、Quform、および Jquery Banner Rotator。ファンシーボックス呼び出しは、ローテーター内で発生しています。元の jquery fancybox CSS の幅/高さは変更していません。

本文の幅を 100% に設定し、マージンを自動に設定し、内部 div の最小幅を 1138px に設定し、マージンを自動に設定しています。

問題を解決するためにどこを見ればよいか知っている人はいますか?

4

13 に答える 13

25

最近、Fancybox v2 で非常によく似た状況が発生しました。私の最初のページにはスクロールバーの下にコンテンツがあったため、スクロールバーがありました（おそらくOPも同様でした。明確ではありません）。Fancybox リンクを起動すると、ページ本文が同じようにシフトし、スクロールバーがクリアされます。Fancybox の画像を閉じると、本文が元に戻り、スクロールバーが再び有効になりました。

への調整.fancybox-lockはうまくいきませんでしたが、Fancybox オブジェクトをインスタンス化するときに次のオプションを含めました。

helpers: { 
    overlay: { 
        locked: false 
    } 
}

唯一の注意点は、スクロールした場合、Fancybox がページの中央にロックされないことです。つまり、Fancybox ビューのページは完全にスクロール可能です。私にとって、それは 2 つの悪の小さい方でした。

于 2013-02-13T18:40:49.700 に答える
7

私は最近同じ問題を抱えていました。.fancybox-lockfancybox CSSを見つけて、次のように変更します。

.fancybox-lock {
    overflow: hidden;
    margin: 0 !important;
    }

出来上がり！:D

于 2012-10-03T04:58:42.673 に答える
0

バージョン 2.1.3 では、jquery.fancybox.js の 1802 ～ 1807 行 (下記) をコメントアウトします。

if (!this.overlay) {

this.margin = D.height() > W.height() || $('body').css('overflow-y') === 'scroll' ? $('body').css('margin-right') : false;

this.el     = document.all && !document.querySelector ? $('html') : $('body');

this.create(opts);

}
于 2013-04-18T13:13:08.687 に答える
0

これは私のためにそれをしました...

.fancybox-lock {
        overflow: hidden !important;
        padding-right: 17px;
}

.fancybox-lock body {
    overflow: hidden !important;
}
于 2015-09-26T20:02:49.547 に答える
0

Fancybox を開いたときに要素がジャンプする問題が修正されている場合は、.fancybox-lock クラスに含まれる CSS の要素に padding-right: 17px を追加するだけです。

于 2016-10-13T13:52:54.087 に答える
0

ファンシーボックス v.2.1.4を使用し、本文の背景画像を中央に固定し、垂直スクロールバーを常に表示させました。

body{
  background: url('../img/sfondo.jpg') fixed center top;
  overflow-y: scroll;
}

スクロールバーの表示を強制したにもかかわらず、Mac の firefox (ライオンのスクロールバーはページ内のスペースを取らないため、chrome と safari は問題ありませんでした) と、つまり、ff,windows の chrome で背景画像のシフトの問題がありました。

そのため、バックグラウンド プロパティでワールドセンターの代わりにx-offsetを手動で設定すると、問題が解決したことに気付きました。そのため、ページの HEAD で少し jquery を使用して管理しました。

<script>
    function centerTheBackground(){
        var pageWidth = $(window).width();
        var imageWidth = 1920; //set here the width of the background image
        var xOffset = (imageWidth/2) - (pageWidth/2);
        jQuery('body').css('background-position', '-' + xOffset + "px top");
    }


    jQuery(function($){
        centerTheBackground();
    });


    $(window).resize(function() {
        centerTheBackground(); //re-center the background image during window resizing
    });             
</script>
于 2013-05-15T09:27:03.560 に答える