Fancybox scroll scrolling on iPhone or iPad

I am trying to prevent the background page from scrolling when Fancybox is open. This helpers: {overlay: {blocked: true} doesn’t work for iPad and iPhone (and I just need to fix it on mobile devices). I can not find any solutions for this. Does it exist? ..

+5
source share
2 answers

"Forcing" to work in a similar environment, as you described, I encountered the same problem. In fact, there are a lot of scrolling and overflow-related answers, mostly related to Fb initialization settings, but none of the answers given anywhere will be of any use - I think you are knowledgeable.

However, in my particular case, I came across a patched (confirmed by the browser) patch, which I am sure is what you need.

When you initialize Fancybox for the first time, remember to set the css values ​​to the position of the body that should be fixed when the Fb window is opened (by adding the afterShow callback), then remove this parameter when closing the window (I use the afterClose callback), Seeing that we want / we only need this patch, which applies to iProducts, you can wrap the actual CSS change code in a state that calls a function that checks the userAgent for compliance. For instance:

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': ''}); } } }); 
+2
source

Fancy has the scrolling: 'hidden', property scrolling: 'hidden', for hidden scrolling. See below code

  $(document).ready(function () { $('.fancybox').fancybox({ scrolling: 'hidden', wrapCSS: 'img-gallery', helpers: { overlay: { locked: true } } }); }); 
0
source

All Articles