jquery - fancybox-2 の背後にあるページのスクロールを防ぐ方法

Question

画像の表示には fancybox2 を使用しています。すべてうまくいきますが、fancybox に大きな画像が表示されると、後ろのページが一番上にスクロールします。ファンシーボックスを閉じた後、ユーザーは下にスクロールして、ボックスを開いた位置に戻る必要があります。fancybox2 サイトの例では、この動作は示されていません。これを実現するための違いはどこにあるのかわかりませんでした。

fancyOptions = {
  type: 'image',
  closeBtn: false,
  autoSize: false,
  scrolling: 'no',
  type: 'image',
  padding: [10,10,10,10],  
  beforeLoad: function(){
    this.title = getTitle(this);
    this.href = $(this.element).closest('a').attr('href');
  },
  helpers: {
    overlay: {
      css: {
        'background': 'rgba(0, 0, 0, 0.7)'
      },
    },
    title: {
      type: 'inside'
    }
  }
};

require.js 内のモジュールとして fancybox2 を使用しています。.fancybox() 呼び出しは $(document).ready ブロックにあります。

そこには2つのスクロールバーがあり、CSSで1つを非表示にしました

.fancybox-overlay {
overflow: hidden !important;
}

score 21 · Accepted Answer

どうやら、Fancybox は要素の CSS プロパティoverflowを画像が表示されたときに変更します。これにより、背景がスクロールして一番上に戻ります。in section in stylesheetという行をコメントアウトするだけです。bodyhiddenoverflow: hidden !important;.fancybox-lockjquery.fancybox.css

fancybox2 / fancybox を使用するとページがトップにジャンプすることも確認してください。

score 19 · Accepted Answer

これは私にとってはうまくいきます：

facnyboxの初期化にフォロー機能を追加

beforeShow: function(){
    $("body").css({'overflow-y':'hidden'});
},
afterClose: function(){
    $("body").css({'overflow-y':'visible'});
}

例：

$(".fancyBoxTrigger").fancybox({
    maxWidth    : 820,
    maxHeight   : 670,
    fitToView   : false,
    width       : 760,
    height      : 580,
    autoSize    : false,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
    padding     : 10,
    closeBtn    : false,
    beforeShow: function(){
        $("body").css({'overflow-y':'hidden'});
    },
    afterClose: function(){
        $("body").css({'overflow-y':'visible'});
    },
    helpers : {
        overlay : {
            opacity: 0.4,
            locked: false
        }
    }
});

うまくいくことを願っています。

score 4 · Accepted Answer

これは私のために働いた：

$.fancybox({
        scrolling   : 'hidden',
        helpers: {
            overlay: {
              locked: true 
            }
        });

それが役に立てば幸い：）

score 3 · Accepted Answer

私の推測？hashmarkクリックして fancybox を起動するセレクターは、 likeを持つアンカーである可能性が最も高いです。

<a href="#">

次に、コードのようにhref、最も近い<a>要素からファンシーボックスを取得します。

  beforeLoad: function(){
    this.title = getTitle(this);
    this.href = $(this.element).closest('a').attr('href');
  }

これは、説明している動作を再現するDEMOです（ファンシーボックスを起動するサムネイルが見つかるまでコンテンツを下にスクロールします）

上記の仮定が正しければ、考えられる解決策は次のとおりです。

1)。hashmarkアンカーのhref属性を次のhashtag #nogoように変更します<a href="#nogo">

Stuart Nicholls (cssplay)が 2005 年 3 月 15 日の更新で言及したように、リンクされた投稿で。

2)。hashmarkまたは、アンカーのhref属性を次のjavascript:;ように置き換えます<a href="javascript:;">

最初のオプションを使用して、更新された JSFIDDLEを参照してください。

score 1 · Accepted Answer

この質問は少し前に出されたことに気づきましたが、良い解決策を見つけたと思います。問題は、ブラウザのスクロールバーを非表示にするために、派手なボックスが本文のオーバーフロー値を変更することです。

SimCity が指摘しているように、次のパラメーターを追加することで、派手なボックスがこれを行うのを止めることができます。

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

score 0 · Accepted Answer

私の変更、これは私を助けます

/* Fancybox */
$('.fancybox').fancybox({
    beforeShow: function(){
        $("body").css({
            "overflow-y": "hidden",
            "position": "fixed"
            }
        );
    },
    afterClose: function(){
        $("body").removeAttr("style");
    }
});

score 0 · Accepted Answer

$('.fancybox').fancybox({
 'beforeLoad': function(){
   disable_scroll();
    },
 'afterClose': function(){
   enable_scroll();
  }
});

var disabled_scroll = false;

function disable_scroll() {
  disabled_scroll = true;
}

function enable_scroll() {
  disabled_scroll = false;
}

fullPage.jsで

function scrollPage(element, callback, isMovementUp)
{
   if(disabled_scroll) return;
   .....
}

score 0 · Accepted Answer

これを試すことができます:-

beforeShow: function(){
 $("body").css({'overflow-y':'hidden'});
},

afterClose: function(){
 $("body").css({'overflow-y':'visible'});

}

fancybox が開いている間、親ページの垂直スクロールを停止します。

score 0 · Accepted Answer

jquery.fancybox.css -> .fancybox-lock
change:
overflow: hidden !important;
to:
overflow: visible !important;
で動作します:)

jquery - fancybox-2 の背後にあるページのスクロールを防ぐ方法

9 に答える 9

Related

Reference