3

プロジェクトで FancyBox を実装するのはこれが初めてです。リンクから画像を切り離しました。そのため、画像にカーソルを合わせると、大きな画像を表示するためのリンクが表示されます。そこにあるものはすべて正常に動作します。私の問題は、リンクをクリックすると、ウィンドウが一番上にジャンプ/スクロールし続けることです。preventDefault を使用して jquery のデフォルト アクションを無効にしましたが、問題は解決しませんでした。助言がありますか？私が達成しようとしていることは、www.labpixls.comでご覧いただけます。

私はこれをすぐに解決する必要があります。wp コミュニティに提供する予定の wordpress テーマを作成しています。

4

2 に答える 2

4

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

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

$('.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;  
    }
于 2014-01-25T19:30:20.163 に答える