Làm thế nào để ngăn chặn kéo xuống để làm mới của chrome di động

Question

Tôi muốn ngăn chặn kéo xuống để làm mới chrome di động (đặc biệt là Chrome của Chrome). Ứng dụng web của tôi có sự kiện panning dọc với chế độ xem thiết bị, chiều rộng và chiều cao thiết bị, nhưng bất cứ khi nào panning xuống, chrome di động làm mới chính nó vì chức năng mặc định của trình duyệt. Ngoài ra, trên trình duyệt Safari, màn hình sẽ được cuộn trong sự kiện panning. Tôi muốn vô hiệu hóa những động thái này.

Tất nhiên, tôi đã thử event.preventDefault(); và hành động cảm ứng: không; Nhưng nó không hoạt động. Tôi có nên thêm eventListner và hành động chạm vào "trên thẻ body" không? Tôi mong đợi câu trả lời hữu ích với ví dụ.

Answer 1

Bạn sẽ thấy bài viết sau của google. Nó trả lời và cung cấp một bản demo làm việc.

https://docs.google.com/document/d/12Ay4s3NWake8Qd6xQeGiYimGJ_gCe0UMDZKwP9Ni4m8/mobilebasic

Answer 2

Kể từ điện thoại di động Chrome> = 56 người nghe sự kiện là thụ động theo mặc định và nghe sự kiện thụ động không thể ngăn chặn mặc định nữa. See here

Bạn cần phải sử dụng nghe sự kiện hoạt động thay vì như vậy:

document.addEventListener('touchstart', touchstartHandler, {passive: false}); 
document.addEventListener('touchmove', touchmoveHandler, {passive: false}); 

Dưới đây là một ví dụ làm việc:

https://output.jsbin.com/niyukadizu/quiet

https://output.jsbin.com/niyukadizu

Answer 3

Hãy thử điều này.

body { 
    /* Disables pull-to-refresh but allows overscroll glow effects. */ 
    overscroll-behavior-y: contain; 
} 

Nó hoạt động tốt cho tôi. Tôi đã có vấn đề di chuyển lạ do các hacks javascript khác. Đọc bài viết này để biết thêm chi tiết.

https://developers.google.com/web/updates/2017/11/overscroll-behavior