Tắt cuộn cơ thể đàn hồi của iOS & giữ nguyên cuộn làm việc

Question

Tôi hiện đang làm việc trên một ứng dụng web trang duy nhất được tối ưu hóa cho các thiết bị cảm ứng, chủ yếu là iOS. Tôi đã triển khai di chuyển bản địa iOS mới qua -webkit-overflow-scrolling: touch; và tất cả hoạt động tốt ngoại trừ việc chúng tôi vẫn đang gặp phải hiệu ứng cuộn đàn hồi của táo trên toàn bộ trang.

Điều này bao gồm toàn bộ trang di chuyển ra khỏi đầu/cuối của chế độ xem khi một cuộn kết thúc hoặc nội dung được đẩy và thực sự cho phép thực tế rằng đây là ứng dụng web. Tôi đã theo dõi various guidelines về cách ngăn chặn điều này và trong khi chúng hoạt động, chúng ngăn các phần tử cuộn bên trong hoạt động hoàn toàn.

Here's a fiddle để minh họa những gì tôi đang sử dụng cho đến thời điểm này.

Có ai tìm thấy giải pháp vô hiệu hóa cuộn đàn hồi của cơ thể nhưng cho phép cuộn bên trong hoạt động không?

Answer 1

Tôi đã thích nghi các giải pháp tốt từ Conditionally block scrolling/touchmove event in mobile safari sử dụng Dojo:

var initialY = null; 
dojo.connect(document, 'ontouchstart', function(e) { 
    initialY = e.pageY; 
}); 
dojo.connect(document, 'ontouchend', function(e) { 
    initialY = null; 
}); 
dojo.connect(document, 'ontouchcancel', function(e) { 
    initialY = null; 
}); 
dojo.connect(document, 'ontouchmove', function(e) { 
    if(initialY !== null) { 
     if(!dojo.query(e.target).closest('#content')[0]) { 
      // The element to be scrolled is not the content node 
      e.preventDefault(); 
      return; 
     } 

     var direction = e.pageY - initialY; 
     var contentNode = dojo.byId('content'); 

     if(direction > 0 && contentNode.scrollTop <= 0) { 
      // The user is scrolling up, and the element is already scrolled to top 
      e.preventDefault(); 
     } else if(direction < 0 && contentNode.scrollTop >= contentNode.scrollHeight - contentNode.clientHeight) { 
      // The user is scrolling down, and the element is already scrolled to bottom 
      e.preventDefault(); 
     } 
    } 
}); 

Yếu tố để được cuộn là #content trong trường hợp này.

Answer 2

lẽ iScroll là những gì bạn đang tìm kiếm (nếu tôi có câu hỏi của bạn ngay)

Answer 3

Lúc nguy cơ sao chép bài của tôi, tôi cố gắng để giải quyết cùng một vấn đề và cho đến nay là chỉ này cho đến nay:

 $(document).bind("touchmove",function(e){ 
      e.preventDefault(); 
     }); 
     $('.scrollable').bind("touchmove",function(e){ 
      e.stopPropagation(); 
     }); 

này hoạt động nếu bạn có một yếu tố tràn mà không bao gồm toàn bộ màn hình , ví dụ như trong ứng dụng iPad. nhưng nó không hoạt động nếu bạn có ứng dụng dành cho thiết bị di động và toàn bộ chế độ xem được bao phủ bởi phần tử tràn của bạn.

Điều duy nhất tôi có thể nghĩ là để kiểm tra scrollTop() của $ ('cuộn') và sau đó có điều kiện ràng buộc preventDefault() nếu nó là 0.

Sau khi thử, tôi nhận thấy rằng báo cáo UA của webkit scrollTop luôn luôn bằng 0 khi phần tử được cuộn lên trên cùng ngay cả khi phần tử "trả lại bên trong" của cuộn thừa gốc. Vì vậy, tôi không thể làm bất cứ điều gì kể từ khi tôi yêu cầu một scrollTop phủ định để thiết lập tình trạng của tôi.

Sigh. Bực bội.