1

Fancybox をロードするリンクをクリックすると、背景ページ全体が右に移動し、スクロール バーを削除するファンシー ボックスが表示されます。他のフォーラムで提案されているように、この JS を追加しようとしましたが、うまくいきませんでした。リンクは以下にあります (ブランド タイトルをクリックしてください)。なぜスクロール バーが削除されるのかわかりません。

次のようにオブジェクトをロードします

<div class="fancybox-hidden" style="display:none;">
                          <div id="post-<?php the_ID(); ?>" class="brand_list" style="width:800px !important;">
                            <h2>The Beers</h2>
                            <div class="beers">
                                <?php the_content(); ?>
                                <div class="clear"></div>
                            </div>
                          </div>
                        </div>

私が試した修正

 <script type="text/javascript">
        $(".fancybox").fancybox({
        helpers: {
            title: {
                type: 'outside'
            },
            overlay: {
                locked: false
            }
        }
        }); 
        </script>

問題

4

4 に答える 4

3

The scrollbar is being removed because jquery.fancybox.pack.js is adding the property overflow: hidden; to the <body> element via the class .fancybox-lock whenever a fancybox is displayed. There are several ways you can handle this.

1) Modify the javascript in jquery.fancybox.pack.js to not add this class to the body element when a fancybox is displayed.
2) Modify the css in jquery.fancybox.css (line 169) to not add the overflow: hidden; property for the .fancybox-lock selector.
3) In one of your own css files, and the !important declaration to the overflow property on the body to override the fancybox css (i.e. body { overflow: auto !important; }).
4) Add the overflow: auto; as an inline style directly on the <body> tag.

于 2013-09-11T02:25:41.647 に答える
0

BigMacAttack が述べたように、問題は要素overflow: hiddenに追加されたスタイルです。<body>これにより、本文からスクロールバーが削除され、スクロールできなくなります。

ただし、を受け入れる解決策はoverflow: hidden、追加のパディングで (スクロールバーの損失による) 追加された本体の幅を補うことです。オーバーレイを開く前に体の幅を保存し、必要に応じてパディングを追加します。

// before opening
var originalWidth = $('body').width(); 

// when open
if ($('body').width() > originalWidth) {
    $('body').css("padding-right", ($('body').width() - originalWidth) +"px");
}

// after closing
$('body').css("padding-right", "");
于 2013-11-07T15:52:34.700 に答える
0

私はまったく同じ問題を抱えていました。必要な作業は次のとおりです。

1) このオプションで Fancybox を起動します。

helpers:{overlay: {css: {'overflow': hidden}}}

2) fancybox css の後に実行されるすべての css ファイルにこの行を追加します。

html.fancybox-lock {overflow-y: scroll !important}

これにより、Web サイト全体を移動することなく Fancybox を開閉できるようになり、html または body タグのオーバーフローには影響しません( fancybox -lock クラスが html タグに存在する場合にのみ「overflow-y: scroll」を設定します)。

于 2015-09-24T19:25:28.590 に答える