2

私は fancyBox v2.1.4 を使用しています。Chrome では、fancyBox が開いているときにメイン ページをスクロールできます。

を使用してlocked: trueいますが、問題は解決していないようです。e.preventDefault別のオプションとして、特定のスクロール機能を無効にすることも検討しました。

$(document).ready(function() {
    $('.fancybox').fancybox({
        'closeClick': false,
        'scrolling': 'no',

        helpers: {
            overlay: {
                closeClick: false,
                locked: true
            }
        },

        beforeShow: function() {
            // considering some type of functionality here to prevent default
            // of mousewheel
        },
        afterClose: function() {
            // restore default action of mousewheel, although my initial attempts
            // at this did not work
        }
    });
});
4

6 に答える 6

4

このコードは私のために働いた：

<script type="text/javascript">
  $(document).ready(function() {
    $(".lightbox").fancybox({
      scrolling: "no",
      openEffect: "elastic",
      padding: 0,
      closeEffect: "elastic",
        afterShow: function(){
            document.ontouchstart = function(e){
                //prevent scrolling
                e.preventDefault();
            }
        },
        afterClose: function(){
            document.ontouchstart = function(e){
                //default scroll behaviour
            }
        },
      helpers: {
          overlay: {
              locked: true
          }
      }
    });
  });
</script>
于 2014-10-28T10:21:29.823 に答える
2

あなたの（そして私も）問題に対する可能な解決策があります。これ以前は、デフォルト ブラウザでAndroid デバイスの fancyBox の背後にあるページをスクロールできました。この小さな「ハック」により、ユーザーはバックグラウンド ページをスクロールできなくなりますが、ブラウザーが「スクロール」イベントをキャッチする速度が原因で、少し不具合があります。

更新:コンピューターのブラウザーでは、この修正は魔法のように機能します。グリッチするのはAndroid ブラウザだけです。

jQuery(document).ready(function($) {    
    var scrolltop, htmlOrBody;

    var antiscrollevent = function(e) {
        e.preventDefault();
        $(htmlOrBody).scrollTop(scrolltop);
    };

    // links met een popover
    $("a.popup").fancybox({
        type: 'ajax',

        beforeShow: function() {
            // considering some type of functionality here to prevent default of
            // mousewheel
            htmlOrBody = $('body').scrollTop() != 0 ? 'body' : 'html';
            scrolltop = $(htmlOrBody).scrollTop();
            $(window).on('scroll', antiscrollevent);
        },
        afterClose: function() {
            // restore default action of mousewheel, although my initial attempts
            // at this did not work
            $(window).off('scroll', antiscrollevent);
        }
    });
});
于 2013-10-24T19:07:59.410 に答える
1

私のために完璧に働いた：

$('.image').fancybox({
   helpers: {
      overlay: {
         locked: false
      }
   }
});
于 2016-06-15T05:19:15.997 に答える
0

scrollOutside次の設定を使用できます。

.fancybox({
  scrolling: "no",
  scrollOutside: "false"
});

このscrolling設定により、垂直スクロールバーが表示されなくなります。

于 2015-05-07T09:20:26.907 に答える
0

私が試したことの多くは、モバイルでのすべての操作を無効にしてしまい、FancyBox を閉じることができなくなりました。

でjQueryのscrollイベントをオーバーライドすることになりましたafterShow。これにより、本文のスクロールを無効にしながら、FancyBox コンテンツとの対話が維持されました。Android ブラウザとモバイル Safari でテスト済み:

afterShow: function(){
            $(document).on('scroll','body',function(e){
                e.preventDefault();
            });
        }

なしで関数をafterClose繰り返すことにより、これをリセットしますscrolle.preventDefault();

于 2014-12-16T22:12:27.103 に答える
0

このコードは Chrome で正常に動作します (Windows バージョン 29.0.1547.57 m)

$(document).ready(function () {
    $('.fancybox').fancybox({
        closeClick: false,
        scrolling: 'no',
        helpers: {
            overlay: {
                closeClick: false //,
                // locked: true // default behavior 
            }
        }
    });
});

JSFIDDLEを参照してください (Chrome)

于 2013-08-27T00:25:35.570 に答える