Tắt di chuyển trên thiết bị di động

Question

Tôi có một trang HTML đơn giản khi tôi chạm vào một div mà chúng tôi không thể cuộn. Bạn có thể tìm thấy trang này here

Nếu bạn mở trang này bằng trình duyệt trên máy tính để bàn, như firefox, nếu bạn giữ nhấp vào div bạn không thể cuộn.

Bây giờ tôi muốn hành vi này trên thiết bị di động, như Android. Trên thực tế trên Android nếu bạn mở trang này, bạn có thể cuộn trong mọi trường hợp.

Xin lỗi vì những màu sắc trong các ví dụ của tôi;)

Answer 1

Tôi nghĩ rằng bạn đang yêu cầu làm thế nào để vô hiệu hóa cuộn trên các thiết bị di động:

Bạn có thể thêm một người biết lắng nghe sự kiện cho touchstart và touchmove. Sau đó, khi các sự kiện này được kích hoạt, hãy sử dụng Modernizr để phát hiện xem trình duyệt có phải là thiết bị cảm ứng hay không. Rõ ràng không phải tất cả điện thoại di động đều là thiết bị cảm ứng và có các thiết bị cảm ứng có độ phân giải cao, do đó bạn có thể thoải mái thêm hoặc vào câu lệnh if.

document.addEventListener('touchstart', this.touchstart); 
document.addEventListener('touchmove', this.touchmove); 

function touchstart(e) { 
    e.preventDefault() 
} 

function touchmove(e) { 
    e.preventDefault() 
} 

Hoặc, chỉ cần sử dụng Modernizr và sau đó sử dụng CSS:

html.touch body { 
    overflow:hidden; 
} 

Và sau đó thêm phương tiện truyền thông truy vấn để có hiệu quả có báo cáo hoặc.