fancybox2 / fancyboxでページがトップにジャンプする

105

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

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

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

jquery css fancybox-2

— シェリフデレク
ソース

注：ipadとiphoneでこれを確認したところ、この問題は発生していません...クロムとファイアフォックスにあります。

— sheriffderek

1

fancybox v2.1.5を使用している場合は、github.com / fancyapps / fancyBox / archive / master.zipのフォームからダウンロードできる最新のマスターで問題が修正されているようです。これにより、jsファイルまたはcssファイルへのハッキングがなくなります。。

— JFK

331

これは実際にはFancybox 2のヘルパーを使用して行うことができます。

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

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

— デイブ・キス
ソース

11

これは間違いなくそれを行う方法です。OPはこれを承認済みの回答としてマークする必要があります。これありがとう！

— cfx 2013

完全に同意する。受け入れられた答え（fancybox2からコードを削除するため）はハックです。

— Rob Gonzalez

残念ながら、受け入れられた回答は1年間変更されていません。将来のユーザーがこれを実装し、「プラグインからコードを切り取る」という答えではないことを願っています。

— AndyWarren 2013年

5

この答えは問題を解決しないと思います。多くの人は fancyboxの背後でコンテンツをスクロールできないようにしたいと思うかもしれません（これlockedがに設定されてfalseいる場合に起こります）。これは、いくつかのシナリオで別の問題を作成する可能性がある問題に対する一時的な回避策です。これはバグであり、最新のマスターgithub.com/fancyapps/fancyBox/archive/master.zipで

— JFK

1

@JFK私はこの修正がスクロールのために実際には理想的ではないかもしれないことに同意しますが、最新のマスターでテストしましたが、ページはまだトップにジャンプします。ただし、fancyboxを閉じると元の位置に戻ります。

— Jonny Wood氏、2014

35

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

— 速い反射神経
ソース

4

ヘルパーを使用すると、ページがオーバーレイの下でマウスホイールでスクロールし続けるため、ヘルパーを使用するよりも優れています。オーバーフローをコメント化すると、オーバーフローはジャンプしなくなりますが、メインページに対してスクロールバーはまだロックされています。

— パナマジャック

14

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

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;  
    }

— ジョーラン
ソース

9

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

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

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

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

— ヨルダン77
ソース

わーい！そのため、ページが左に20pxジャンプしていました。ありがとう！私の問題の2つを解決しました！

— sheriffderek

スクロールバーはそこにあります...しかし、私は常にoverflow-y：scrollを使用しています。とにかく、それは私にとって公正なトレードオフです。

— sheriffderek

マウスホイールの機能がブロックされると思います。他の解決策も探し続けます。しかし、私が言ったように、これは今のところトリックをやっています！

— sheriffderek

3

fancybox v2.1.5を使用している場合は、github.com / fancyapps / fancyBox / archive / master.zipのフォームからダウンロードできる最新のマスターで問題が修正されているようです。これにより、jsファイルまたはcssファイルへのハッキングがなくなります。。

— JFK

1

これが当時の最良の答えでした...何らかの理由でレガシーサイトなどがある場合は、これを参考にしてください。

— sheriffderek 14

6

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

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

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

— thexpand
ソース

ので、これは起こることができるもう一つの理由はある<body>か/と<html>していることheight: 100%

— thexpand

4

これも助けた

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

— hsobhy
ソース

1

特に！important修飾子を使用してカスケードを解除する必要がある場合は、サードパーティのスタイルを上書きすることはお勧めできません。私はすべての人に、これではなく、上記のDave Kissによって提供された修正を使用することをお勧めします。

— FabianSchöner、2015

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'); 
            }
        });

— イアン
ソース

0

多分この答えは遅れているかもしれませんが、多分それは将来役立つかもしれません、もし画像のflicboxをクリク/閉じた後にあなたのウェブサイトを上にスクロールさせたら、あなたは単に削除することができます：

F.trigger('onReady');

またはより良い使用：

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

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

— ナホミー・アティアス
ソース

0

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

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

— スティール・ロッキー
ソース

-4

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

overflow: hidden !important;

中.fancybox-lockで体jquery.fancybox.css。スクロールバーがジャンプしない:)

— user2684988
ソース

4

これが、1か月前に高速反射神経が言ったことです。

— BoltClock