web-dev-qa-db-ja.com

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

画像の表示にはfancybox2を使用しています。すべてうまくいきますが、大きな画像がファンシーボックスに表示されると、後ろのページが一番上にスクロールします。ファンシーボックスを閉じた後、ユーザーはボックスを開いた位置まで下にスクロールする必要があります。 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;
}
jqueryfancyboxfancybox-2
15
tomsteg

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

fancybox2/fancyboxによりページがトップにジャンプする もご覧ください。

21
fast-reflexes

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

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

うまくいくと思います。

17
Avinash

これは私のために働きました：

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

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

4
SimCity

私の推測？ fancyboxを起動するためにクリックするセレクターは、おそらくhashmarkのようなアンカーです：

<a href="#">

次に、コードのように、最も近い<a>要素からfancyboxのhrefを取得します。

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

ここにデモ機です記述している動作を再現します（ファンシーボックスを起動するサムネイルが見つかるまでコンテンツを下にスクロールします）

上記で想定したことが正しい場合、可能な解決策は次のとおりです。

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

Stuart Nicholls（cssplay） が2005年3月15日に更新したリンク先の投稿で言及されています。

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

最初のオプションを使用してpdated JSFIDDLEを参照してください。

3
JFK

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

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;  
    }
1
Joeran
$('.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;
   .....
}
0
Alper Onur

私の修正、これは私を助けます

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

あなたはこれを試すことができます：-

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

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

}

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

0
Ravindra Shekhawat

Jquery.fancybox.css-> .fancybox-lock
変化する：
overflow: hidden !important;
に：
overflow: visible !important;
私のために働く:)

0
Martin Filek