Can't scroll down in my "fancybox" and also in my "sidr side left menu" on mobile (in some browsers)

Question

I'm using two jQuery plugins: sidr ( for a side left menu) and fancybox ( to show some articles content).

These two plugins are working fine in desktop versions, but I have a mobile version for my website and in this mobile version in some browsers I'm having a problem.

I'm not able to scroll down my content inside fancybox, and I'm not also able to scroll down my menu items inside my sidr side left menu.

Do you know why this can be happening?

I already tried to use -webkit-overflow-scrolling: touch; but I never have success.

Here I have my fancybox demo:

http://jsfiddle.net/qVrLr/112/

In desktop versions when I click in "Read more" to open fancybox my website content stays blocked, and I can scroll my fancybox without problems.

In mobile when I click in "Read more" to open fancybox my website content its not blocked, when I scroll fancybox my website content.

And in some browsers when I try to scroll fancybox, I just scroll my website page behind fancybox, but my fancybox dont scrolls...

Answer 1

I faced similar issue in one of the website's responsive frontend I was working on, I had my own dialog box implementation though but your problem feels alike. Most of the answers on the web point out to making the body's overflow property to be hidden for touch devices but that doesnt work well (i forgot what went wrong with that, but i can assure you it doesnt work). The next solution was to set position fixed for the body after opening the dialog & resetting to relative/static on closing.

if(Modernizr.touch){
 $("body").css("position", "fixed");
}

This works well and doesn't disturb the dialog's scroll. But the issue with it is if the dialog box opening action is done at the bottom of the page then on opening the dialog the page scrolls up automatically (takes top:0). To fix this you can use the below class to remember the offsetY and set it back again on closing.

function ScrollBlocker(){
    var self = this;

    self.offsetY = window.pageYOffset;
    self.$body = $('body'),
    self.$win = $(window),
    self.$close = $('.close'),
    self.$open = $('.open'),
    self.$holder = $('#popupholder'),
    self.$stuff = $('#stuff');
}
ScrollBlocker.prototype.block = function(){
    var self = this;

    self.offsetY = window.pageYOffset;
        // Block scrolling
        self.$body.css({
            'position': 'fixed',
            'top': -self.offsetY + 'px'
        });
}
ScrollBlocker.prototype.unblock = function(){
    var self = this;

    self.$body.css({
        'position': 'static',
    });

    self.$win.scrollTop(self.offsetY);
    self.$stuff.scrollTop(0);
}
var scrollBlocker = new ScrollBlocker();

Using the block and unblock functions on opening and closing respectively you can fix your issue. e.g on opening a dialog

if(Modernizr.touch || BrowserDetect.windowsPhone)
    {
        scrollBlocker.block();
    }

Similarly calling unblock() on close. (Fancybox must have events for opening and closing)

The ScrollBlocker worked well for me!

Source - I faced this problem earlier and it took a lot of time to come to an exact solution. The ScrollBlocker class was implemented using an answer at stackoverflow but this was months ago so I am unable to find the question that helped.