Cuộn lớp phủ Fancybox trên iPhone hoặc iPad

Question

Tôi đang cố gắng ngăn trang nền cuộn khi Fancybox đang mở. Người giúp việc này: { lớp phủ: { bị khóa: true } không hoạt động cho iPad và iPhone (và tôi chỉ cần khắc phục trên thiết bị di động). Tôi không thể tìm thấy bất kỳ giải pháp cho điều đó. Nó có tồn tại không? ..

Answer 1

'Buộc' để hoạt động trong một môi trường tương tự như bạn mô tả Tôi đã gặp chính xác cùng một vấn đề. Thật vậy, có rất nhiều câu trả lời liên quan đến cuộn và tràn, hầu hết liên quan đến cài đặt khởi tạo của Fb, nhưng không có câu trả lời nào được đưa ra ở bất cứ nơi nào sẽ làm tốt - như tôi tưởng tượng bạn biết rõ.

Tuy nhiên, trong trường hợp cụ thể của tôi, tôi đã tình cờ gặp một lỗi (đã được xác nhận bởi Browserstack) rằng tôi chắc chắn là những gì bạn cần.

Khi khởi tạo hộp ưa thích đầu tiên, hãy đảm bảo đặt giá trị css cho vị trí của cơ thể để cố định khi mở cửa sổ Fb (bằng cách thêm gọi lại sau), sau đó xóa cài đặt đó khi cửa sổ đóng (tôi sử dụng gọi lại sauClose). Nhìn thấy chúng tôi chỉ muốn/cần sửa chữa này áp dụng cho iProducts chúng ta hãy quấn mã CSS-thay đổi thực tế trong một điều kiện gọi một chức năng mà kiểm tra userAgent cho một trận đấu. Giống như vậy:

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

Ưa thích có thuộc tính scrolling: 'hidden', để ẩn cuộn. Xem bên dưới mã

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