fancyBox v2: How do I prevent background scrolling in Chrome?

Question

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

[This answer][1] is perfectly working for me [1]: http://stackoverflow.com/a/21355151/1920434 — harisrozak, Mar 13 '15 at 06:58

score 4 · Answer 1 · edited Oct 28 '14 at 10:28

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>

This looked as if it was going to work well for me. The only problem was, the `afterShow` also disabled the ability to close fancyBox by touching the "X" icon. Anyway around that problem? — Karl, Feb 19 '16 at 11:11

score 2 · Answer 2 · edited May 15 '14 at 10:12

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

score 0 · Answer 3 · answered Aug 27 '13 at 00:25

0

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)

answered Aug 27 '13 at 00:25

JFK

40,294
31
126
295

There must be some on page element influencing my situation, this still doesn't work, after the lighbox opens I am still able to scroll down on the page. – absentx Aug 27 '13 at 01:47
@absentx : does the jsfiddle work for you? otherwise, can you share a link? ... my bet is that you have some specific css styles on either the html or body tags (or another plugin that manipulates them altogether) – JFK Aug 27 '13 at 01:49
yes, your jsfiddle works for me, but when I use it there is also not enough content on the page for a scroll to be needed, perhaps you could add a few more paragraphs and we try that way? – absentx Aug 27 '13 at 04:11
interesting update to the problem. If the cursor is on the left half of the page with the lightbox open, it won't scroll, but if you move the mouse to the right side of the page, the scroll occurs when using the mousewheel! – absentx Aug 27 '13 at 23:44

score 0 · Answer 4 · answered Dec 16 '14 at 22:12

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

score 0 · Answer 5 · answered May 07 '15 at 09:20

0

You can use the scrollOutside setting:

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

the scrolling setting prevents the vertical scrollbar to show.

answered May 07 '15 at 09:20

Canutza

73
9

score 0 · Answer 6 · answered Jun 15 '16 at 05:19

0

Worked for me perfectly:

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

answered Jun 15 '16 at 05:19

endur

595
10
11

fancyBox v2: How do I prevent background scrolling in Chrome?

6 Answers6

Linked