Fancybox overlay scrolls on iPhone or iPad

Question

I'm trying to prevent scrolling background page when Fancybox is open. This helpers: { overlay: { locked: true } doesn't work for iPad and iPhone (and I just need to fix it on mobile devices). I can't find any solutions for that. Does it exist?..

Answer 1

'Forced' to work within a similar environment as you describe I've ran into exactly the same problem. Indeed there's a lot of scroll- and overflow related answers out there, mostly relating to Fb's initialisation settings, but none of the answers given anywhere will do any good - as I imagine you are well-aware.

However, in my specific case I stumbled upon a (Browserstack-confirmed) fix that I am pretty sure is what you need.

When first initialising Fancybox, be sure to set the css values to the body's position to fixed upon opening a Fb window (by adding an afterShow callback), then remove that setting when the window is closed (I use the afterClose callback). Seeing we only want/need this fix applied to iProducts let's wrap the actual CSS-altering code in a condition calling a function which checks the userAgent for a match. Like so:

function applePie() {
    return ( navigator.userAgent.match(/(iPhone|iPod|iPad)/i) );
}

$('.fancy-overlay').fancybox({
    your: 'settings',
    afterShow: function() { 
        if ( applePie() ) { $('body').css({'position': 'fixed'}); } 
    },
    afterClose: function() {
        if ( applePie() ) { $('body').css({'position': ''}); }
    }
});