fancyBox v2: How do I prevent background scrolling

问题:

I'm using fancyBox v2.1.4. In Chrome it's allowing scrolling of the main page when the fancyBox is open.

I'm utilizing the locked: true but that doesn't seem to solve the issue. I have also considered using e.preventDefault to disable certain scrolling abilities as another option:

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

回答1:

this code worked for me:

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

回答2:

I've got a possible solution to your (and also my) problem. Before this, I was able to scroll the page behind the fancyBox on Android devices in the default browser. With this little 'hack' the user can't scroll the background page anymore, but it's a little bit glitchy though because of the speed the browser catches 'scroll' events.

UPDATE: On computer browsers this fix works like a charm. It's only the Android browser that glitches.

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

回答3:

This code works fine for me in Chrome (Windows Version 29.0.1547.57 m)

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

See JSFIDDLE (in Chrome)

回答4:

Many of the things I tried ended up disabling all interaction on mobile, making the FancyBox impossible to close.

I ended up overriding jQuery's scroll event on afterShow. This preserved interaction with FancyBox content while disabling scrolling of the body. Tested on Android Browser and Mobile Safari:

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

Reset this on afterClose by repeating the scroll function without e.preventDefault();

回答5:

You can use the scrollOutside setting:

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

the scrolling setting prevents the vertical scrollbar to show.

回答6:

Worked for me perfectly:

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