Nakładka Fancybox przewija się na iPhonie lub iPadzie

Question

Próbuję zapobiec przewijaniu strony w tle, gdy otwarty jest Fancybox. Ta pomoc: : { nakładka: { zablokowana: true } } nie działa na iPada i iPhone'a (i po prostu trzeba to naprawić na urządzeniach mobilnych). Nie mogę znaleźć żadnych rozwiązań. Czy istnieje? ..

Answer 1

"Zmuszony" do pracy w podobnym środowisku, jak opisałeś Wystąpiłam dokładnie w tym samym problemie. W rzeczywistości istnieje wiele odpowiedzi związanych z przewijaniem i przewijaniem, w większości związanych z ustawieniami inicjalizacji Fb, ale żadna z odpowiedzi podanych w dowolnym miejscu nie przyniesie żadnego pożytku - jak sobie wyobrażam, że jesteś dobrze poinformowany.

Jednak w moim konkretnym przypadku natknąłem się na naprawę (potwierdzoną przez Browserstack), że jestem pewien, że jest to, czego potrzebujesz.

Podczas pierwszej inicjalizacji programu Fancybox należy ustawić wartości css na pozycję ciała, która ma zostać ustalona po otwarciu okna Fb (przez dodanie wywołania funkcji AfterShow), a następnie usunąć to ustawienie, gdy okno jest zamknięte (używam funkcji zwrotnej afterClose). Widząc, że chcemy tylko/potrzebujemy tej poprawki zastosowanej do iProducts, zawińmy właściwy kod zmieniający CSS w warunek wywołujący funkcję, która sprawdza UserAgent pod kątem dopasowania. Podobnie jak:

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 ma właściwość scrolling: 'hidden', do przewijania w chowanego. Zobacz poniżej kod

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