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

absentx picture absentx · Aug 26, 2013 · Viewed 8.7k times · Source

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

Answer

Viacheslav Kostechko picture Viacheslav Kostechko · Oct 28, 2014

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>