web-dev-qa-db-ja.com

fancybox v2 / fancyboxにより、ページがトップにジャンプします

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

ファンシーボックスを使用すると（リンクをクリックするなど）、HTML全体が背後に移動し、トップに移動します。別のデモでうまく動作していますが、同じプロジェクトをこのプロジェクトにドラッグすると、一番上にジャンプします。インラインdivへのリンクだけでなく、シンプルな画像ギャラリーもあります。

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

jquerycssfancybox-2
103
sheriffderek

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

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

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

327
Dave Kiss

Jordanj77は正しいですが、最も簡単な解決策は、スタイルシートjquery.fancybox.cssに移動し、セクションoverflow: hidden !important;で.fancybox-lockと言う行をコメントアウトすることです。

35
fast-reflexes

これは古い質問だと思いますが、それに対する良い解決策を見つけたと思います。問題は、豪華なボックスがブラウザのスクロールバーを隠すためにボディのオーバーフロー値を変更することです。

Dave Kissが指摘しているように、次のパラメーターを追加することで、ファンシーボックスがこれを行うのを止めることができます。

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

しかし、今では、空想ボックスウィンドウを見ながらメインページをスクロールできます。ページの先頭にジャンプするよりも良いですが、おそらく私たちが本当に望んでいるものではありません。

次のパラメーターを追加することにより、正しい方向へのスクロールを防ぐことができます。

    $('.image').fancybox({
      padding: 0,
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }
    });

そして、galambalazからこれらの関数を追加します。参照： スクロールを一時的に無効にする方法？

    var keys = [37, 38, 39, 40];

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault) e.preventDefault();
      e.returnValue = false;  
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

    function wheel(e) {
      preventDefault(e);
    }

    function disable_scroll() {
      if (window.addEventListener) {
          window.addEventListener('DOMMouseScroll', wheel, false);
      }
      window.onmousewheel = document.onmousewheel = wheel;
      document.onkeydown = keydown;
    }

    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
    }
14
Joeran

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

FancyBoxコードのこのセクションを削除して、それを防ぐことができます。

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

    if (this.margin !== false) {
        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
    }
}
9
jordanj77

この問題を解決する適切な方法は、fancyboxが提供するオプション（ この回答を参照 ）によるものであるという事実にもかかわらず、CSSを使用して問題を解決できます。ライブラリのcssファイルを編集する必要はありません。これをアプリケーションのメインスタイルシートに追加するだけです。

html.fancybox-lock {
    overflow: visible !important;
}

コードは、要素の元のオーバーフローをリセットします。問題は、overflow: hidden;が<html>要素のスクロールバーを非表示にして、ページを上部に「ジャンプ」させることです。スクロールバーの位置を保持するために、overflow: visible;でオーバーフローを上書きします

6
thexpand

これも助けました

.fancybox-lock body {
    overflow: visible !important;
}
4
hsobhy

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

        $('.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'); 
            }
        });
1
Ian

Fancyboxのデフォルト関数を使用している場合、実際には次のようにコーディングできます。

    $(document).ready(function() {
        $(".fancybox").fancybox({
            padding: 0,
            helpers: {
                overlay: {
                  locked: false
                }
            }
        });
    });
0
Steele Rocky

たぶんこの答えはまだ遅いかもしれませんが、画像ファンシーボックスをクリックしてウェブサイトを一番上までスクロールした後、削除することができれば将来的に役立つかもしれません：

F.trigger('onReady');

またはより良い使用：

/*F.trigger('onReady');*/

FancyBoxバージョン：2.1.5（金、2013年6月14日）のコードの一部は897行目です。

0
Nahomy Atias