iPad tắt tính năng cuộn tài liệu nhưng không xóa cuộn cuộn div

Question

Tôi đang phát triển các cửa sổ phương thức có khả năng cuộn được, giống như các cửa sổ ưa thích. Khi chúng được kích hoạt, hãy xác định overflow: hidden trên body và overflow: auto trên hộp chứa phương thức. Điều này làm việc rất tốt trên các trình duyệt máy tính để bàn nhưng thử nghiệm đầu tiên của tôi trên iPad (và tôi cho rằng có thể trên iOS nói chung) cho thấy một vấn đề:

Khi di chuyển phương thức kết thúc, nếu tài liệu dài hơn phương thức cuộn tiếp tục.

Tôi cố gắng này với ý định chỉ chấp nhận di chuyển nếu nó được kích hoạt bởi các phương thức hoặc container của nó:

// Disable browser scrolling on iOS 
$(document).on('touchmove',function(e) { 
    if (($(e.target).attr('id') != id) && 
    ($(e.target).attr('id') != ('modal-'+id))) { 
     e.preventDefault(); 
    } 
}); 

Và nó thực sự công trình làm đúng đó. Các phương thức cuộn và khi nó kết thúc cuộn trang chỉ có thể nếu bạn cuộn bên trong phương thức.

Bạn có ý tưởng gì không?

Hãy thử nó trong iPad của bạn nếu bạn muốn (bạn phải bấm vào nút modal): http://www.onebigrobot.com/beta/altair/transforms-so

Cảm ơn bạn trước!

Answer 1

Thay đổi nhỏ rất mạnh!

Tất cả sự cố được giải quyết thay đổi position: absolute bởi position: fixed trên vùng chứa phương thức (và cũng trên mặt nạ tối của nền nếu cần). Trong thực tế, với định vị tuyệt đối, phương thức này chỉ hoạt động vì nút ở trên cùng của trang.

Với trình duyệt trên máy tính để bàn định vị cố định hoạt động hoàn hảo và trên iPad, điều gì đó thú vị xảy ra. Khi cuộn của phương thức kết thúc, cuộn của trang bắt đầu hoạt động nhưng với phương thức luôn ở trên vị trí tốt.

Tôi hy vọng câu hỏi này có thể hữu ích cho ai đó.