Làm cách nào để ngăn chặn hành vi mặc định của sự kiện touchmove trong iOS 5?

Question

Tôi có một ứng dụng dựa trên web bao gồm một thành phần mà người dùng có thể cuộn lên và xuống bằng ngón tay của họ. Tôi sử dụng phương pháp preventDefault của sự kiện để ngăn chặn hành vi mặc định khi di chuyển cảm ứng dịch chuyển toàn bộ màn hình xung quanh trên các thiết bị iOS.

Thật không may điều này dường như không hoạt động nữa trong iOS 5 mà tôi vừa mới nâng cấp lên sáng nay. Tôi phải giả định rằng điều này chỉ được thực hiện khác nhau trong iOS 5, nhưng tôi vẫn chưa thể tìm thấy một tài nguyên cung cấp hướng dẫn.

Cảm ơn!

Cập nhật # 1: Tôi không thể tìm thấy câu trả lời cho câu hỏi cụ thể của mình, nhưng tôi có thể điều chỉnh mã của mình một chút để sử dụng kiểu cuộn -webkit-cuộn (được đặt thành giá trị "chạm ") và thực hiện khả năng di chuyển quán tính snazzy (nơi nội dung cuộn nhanh hơn tùy thuộc vào tốc độ của swipe của bạn và sẽ" cao su ban nhạc trả lại "... Điện thoại

Cập nhật # 2: Bây giờ tôi có một vấn đề lạ khác.Vì một số lý do kỳ lạ rằng hành vi di chuyển tràn bị trộn lẫn đôi khi nhờ đó bạn phải kéo ngón tay sang trái và phải qua phần tử chứa để làm cho nội dung của nó di chuyển lên và xuống. để tìm hiểu lý do tại sao điều này xảy ra - có ai có bất kỳ ý tưởng nào không?

Answer 1

Thứ nhất, tôi có thể xác minh rằng e.preventDefault() vô hiệu hóa tất cả di chuyển trong iOS 5 bằng cách sử dụng đoạn mã sau:

document.ontouchmove = function(e){ e.preventDefault(); } 

Thật không may, tuy nhiên, điều này sẽ vô hiệu hóa các di chuyển trên overflow: di chuyển div. (Nếu có ai có giải pháp để cho phép cuộn phần tử bên trong được bật, vui lòng chia sẻ.)

Về cập nhật # 2, tôi đã nhận thấy hành vi lạ khi có phần tử cuộn được lồng trong phần tử cuộn khác (bao gồm cả trang). Đôi khi thiết bị do dự về yếu tố người dùng dự định cuộn. Đặc biệt tôi đã nhận thấy vấn đề này bằng cách sử dụng vị trí: cố định. Giải pháp của tôi là đảm bảo cơ thể có chiều cao 100% và các phần tử cuộn có thể sử dụng vị trí: tuyệt đối nếu có thể.

Answer 2

Tôi đã tìm thấy một giải pháp rất đơn giản. Khi sự kiện chạm vào phần tử của bạn được phép cuộn, chỉ cần thêm cờ vào sự kiện. Trên lắng nghe sự kiện trên các tài liệu chỉ cần kiểm tra nếu cờ được thiết lập và chỉ dừng sự kiện nếu cờ không được thiết lập:

this.$scrollableEl.on('touchmove', function(event){ 
    event.comesFromScrollable = true; 
    //when you have containers that are srollable but 
    //doesn't have enough content to scroll sometimes: 
    //event.comesFromScrollable = el.offsetHeight < el.scrollHeight; 
}) 

$document.on('touchmove', function(event){ 
    if(!event.comesFromScrollable){ 
     event.preventDefault() 
    } 
    }) 

Bạn cũng có thể sử dụng event.stopImmediatePropagation thay vào đó, do đó bạn không cần eventListener trên tài liệu yếu tố, nhưng điều này phá vỡ zepto.js tap trong trường hợp của tôi:

this.$scrollableEl.on('touchmove', function(event){ 
    event.stopImmediatePropagation() 
})