108

開発サイトに fancybox2 を実装しました。

ファンシーボックスを操作すると（リンクなどをクリックすると）、html全体がその後ろに移動し、上部に移動します。別のデモでは問題なく動作していますが、同じコードをこのプロジェクトにドラッグすると、一番上にジャンプします。インライン div へのリンクだけでなく、単純な画像ギャラリーにも使用できます。

誰もこれを経験しましたか？

4

11 に答える 11

337

これは、実際には Fancybox 2 のヘルパーで実行できます。

$('.image').fancybox({
  helpers: {
    overlay: {
      locked: false
    }
  }
});

http://davekiss.com/prevent-fancybox-from-jumping-to-the-top-of-the-page/

于 2013-03-09T03:37:38.830 に答える
9

問題は、fancyBox がブラウザーのスクロールバーを非表示にするために body のオーバーフロー値を変更することです。この動作を切り替えるオプションが見つかりませんでした。

これを防ぐために、fancyBox コードのこのセクションを削除できます。

if (obj.locked) {
    this.el.addClass('fancybox-lock');

    if (this.margin !== false) {
        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
    }
}
于 2012-11-25T05:02:53.637 に答える
4

これも役に立ちました

.fancybox-lock body {
    overflow: visible !important;
}
于 2014-03-22T08:45:32.390 に答える
1

受け入れられた回答は完全ではありません。実際には問題を解決するわけではなく、回避するだけです。ウィンドウジャンプの問題を修正しながら、実際に必要な機能を提供するより完全な回答を次に示します。 

        $('.fancybox').fancybox({
            helpers: {
                overlay: {
                    locked: false
                }
            },
            beforeShow:function(){ 
                $('html').css('overflowX', 'visible'); 
                $('body').css('overflowY', 'hidden'); 
            },
            afterClose:function(){ 
                $('html').css('overflowX', 'hidden');
                $('body').css('overflowY', 'visible'); 
            }
        });
于 2016-05-13T16:47:32.333 に答える
-4

私はそれを修正しました：

overflow: hidden !important;

イン.fancybox-lockボディインjquery.fancybox.css。そしてスクロールバーはジャンプしません:)

于 2013-08-15T06:26:17.797 に答える