Nội dung div Ipad không cuộn khi sử dụng làm popup

Question

Tôi không thể giải quyết vấn đề này: Tôi có một div mà tôi hiển thị và ẩn dưới dạng cửa sổ bật lên với jquery. Nội dung là plugin bình luận của facebook. Đây là mã:

<div id="popup"> 
    <div class="mask"> 
     <div class="fb-comments" data-href="http://www.example.com" data-num-posts="30" data-width="470" data-colorscheme="light"></div> 
    </div> 
</div> 

Đây là CSS tôi có cho đến nay:

#popup { 
position:absolute; 
left:0px; 
top:0px; 
width:512px; 
height:530px; 
background:url(../img/bg_popup.gif) repeat-x 0px 0px; 
display:none; 
overflow:hidden; 
z-index:110; 
} 

#popup .mask { 
margin:5px 0px 0px 10px; 
width:498px; 
height:475px; 
overflow-y: scroll; 
overflow-x: hidden; 
} 

Tôi đang định vị popup ở trung tâm của màn hình với jquery, và tất cả mọi thứ hoạt động tốt trên mọi trình duyệt . Cửa sổ bật lên xuất hiện và tôi có thể cuộn nội dung.

Sự cố xảy ra với Ipad Safari. Div không cuộn và đã cố gắng sử dụng tính năng cuộn tràn trên webkit: chạm vào nhưng không có gì xảy ra.

Một điều nữa: Nếu tôi bắt đầu với màn hình hiển thị div bật lên được đặt thành "chặn", thao tác cuộn, nhưng nội dung xuất hiện theo từng phần.

Bất kỳ ý tưởng nào? Cảm ơn!

Answer 1

Thay đổi .mask css thành chiều cao tự động và làm cho nó có thể kéo bằng cách sử dụng jQueryUI có thể kéo trên trục y. #popup div bị tràn và ẩn là mặt nạ "thực" trong trường hợp này. Vì vậy, bạn có thể di chuyển div .mask hiện tại lên/xuống nhưng không phải trái/phải. Bạn chỉ cần một số phép tính để sửa, nếu người dùng đang cuộn bên ngoài div #popup. Vì vậy, bạn cần lắng nghe sự kiện dừng. Tính năng này chỉ hoạt động trên màn hình cảm ứng. Trên máy khách của máy tính để bàn, bạn phải kéo div bằng cách nhấp vào trước (nhưng với một chút mã bạn có thể xử lý này).

Để được hỗ trợ cảm ứng tốt hơn với jQueryUI thêm jQuery UI Touch Punch

Ví dụ:

$('#popup .mask').draggable(
    axis:"y", 
    stop:function(event, ui){ 
     // If there's any correction required you can do here 
     // e.g. the overscroll like on iOS 
    } 
);