Fancybox Overlay scrollt auf iPhone oder iPad

Question

Ich versuche zu verhindern scrollende Hintergrundseite, wenn Fancybox geöffnet ist. Diese Helfer: { Overlay: { gesperrt: True } funktioniert nicht für iPad und iPhone (und ich muss nur auf mobilen Geräten reparieren). Ich kann dafür keine Lösungen finden. Existiert es? ..

Answer 1

'Gezwungen' in einer ähnlichen Umgebung zu arbeiten, wie Sie beschreiben, ich habe genau das gleiche Problem gerannt. Tatsächlich gibt es eine Menge von Scroll- und Overflow-bezogenen Antworten, die sich hauptsächlich auf Fbs Initialisierungseinstellungen beziehen, aber keine der Antworten, die irgendwo gegeben werden, wird etwas nützen - wie ich mir vorstelle, dass Sie sich dessen bewusst sind.

In meinem speziellen Fall stolperte ich jedoch über einen (Browserstack bestätigten) Fix, von dem ich ziemlich sicher bin, was Sie brauchen.

Beim ersten Initialisieren von Fancybox stellen Sie sicher, dass die css-Werte an der Position des Körpers beim Öffnen eines Fb-Fensters festgelegt werden (indem Sie einen afterShow-Callback hinzufügen) und entfernen Sie diese Einstellung, wenn das Fenster geschlossen ist (ich verwende den afterClose-Callback). Wenn wir sehen, dass dieser Fix nur auf iProducts angewendet werden soll, müssen wir den eigentlichen CSS-ändernden Code in eine Bedingung einfügen, die eine Funktion aufruft, die den userAgent auf eine Übereinstimmung überprüft. Wie 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': ''}); } 
    } 
}); 

Answer 2

Fancy hat eine Eigenschaft scrolling: 'hidden', für ausblenden blättern. Siehe unten Code

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