Bạn và người dùng của mình muốn các ứng dụng web dành cho thiết bị di động phản ứng và cuộn mượt mà trên chạm. Phát triển ứng dụng thật dễ dàng, nhưng thật không may, web dành cho thiết bị di động trình duyệt phản ứng với các sự kiện chạm trong quá trình cuộn được thực hiện trong phần thông số kỹ thuật TouchEvent. Như Do đó, các phương pháp tiếp cận có thể được chia thành 4 loại. Chiến dịch này tình huống này cho thấy sự căng thẳng cơ bản giữa việc cung cấp độ mượt của thao tác cuộn và duy trì quyền kiểm soát của nhà phát triển.
4 mô hình xử lý sự kiện chạm là gì?
Sự khác biệt về hành vi giữa các trình duyệt được chia thành bốn mô hình.
Xử lý sự kiện đồng bộ thông thường
Các sự kiện di chuyển bằng thao tác chạm được gửi trong khi cuộn và mỗi lần cập nhật thao tác cuộn sẽ bị chặn cho đến khi quá trình xử lý thao tác chạm hoàn tất. Đây là định dạng đơn giản nhất và dễ hiểu nhất, nhưng lại kém hiệu quả nhất đối với hiệu suất cuộn vì nó có nghĩa là mỗi khung trong khi cuộn phải chặn trên luồng chính.
Trình duyệt: Trình duyệt Android (Android 4.0.4, 4.3), Mobile Safari (khi cuộn div)
Xử lý thao tác chạm không đồng bộ
Sự kiện di chuyển bằng thao tác chạm được gửi trong quá trình cuộn, nhưng thao tác cuộn có thể tiến hành không đồng bộ (sự kiện di chuyển chạm bị bỏ qua sau khi bắt đầu cuộn). Điều này có thể dẫn đến tình trạng "xử lý hai lần" cho các sự kiện, chẳng hạn như tiếp tục cuộn sau khi trang web thực hiện thao tác chạm bằng thao tác chạm và gọi preventDefault trên sự kiện để yêu cầu trình duyệt không xử lý.
Trình duyệt: Mobile Safari (khi cuộn Tài liệu), Firefox
Bị chặn cử chỉ chạm trong khi cuộn
Sự kiện di chuyển bằng thao tác chạm sẽ không được gửi sau khi bắt đầu cuộn và không tiếp tục cho đến sau sự kiện chạm. Trong mô hình này, khó phân biệt giữa thao tác chạm tại chỗ và thao tác cuộn.
Trình duyệt: Trình duyệt Samsung (đã gửi sự kiện di chuyển chuột)
Huỷ thao tác chạm khi bắt đầu cuộn
Bạn không thể sử dụng cả hai cách – độ mượt và kiểm soát của nhà phát triển – và mô hình này làm rõ sự cân bằng giữa cuộn mượt mà và xử lý sự kiện, tương tự như ngữ nghĩa của thông số kỹ thuật Sự kiện con trỏ. Một số trải nghiệm có thể cần theo dõi ngón tay, chẳng hạn như kéo để làm mới, là không thực hiện được.
Trình duyệt: Chrome Desktop M32+, Chrome Android
Tại sao lại thay đổi?
Chrome dành cho Android hiện sử dụng Mô hình cũ của Chrome: chạm hủy khi cuộn start, giúp nâng cao hiệu suất cuộn, nhưng khiến nhà phát triển nhầm lẫn. Cụ thể, một số nhà phát triển không biết về sự kiện huỷ thao tác chạm hoặc cách xử lý vấn đề và vấn đề này đã khiến một số trang web gặp sự cố. Quan trọng hơn, việc toàn bộ lớp hiệu ứng và hành vi cuộn của giao diện người dùng, chẳng hạn như kéo để làm mới, thanh ẩn giấu và điểm chụp nhanh khó hoặc không thể triển khai tốt.
Thay vì thêm các tính năng được mã hoá cứng đặc biệt để hỗ trợ những hiệu ứng này, Mục đích của Chrome là tập trung vào việc thêm những thông tin cơ bản của nền tảng để cho phép các nhà phát triển để trực tiếp triển khai các hiệu ứng này. Xem Nền tảng web hợp lý để trình bày chung về triết lý này.
Mô hình mới của Chrome: Mô hình Async Touchmove bị điều tiết
Chrome sắp ra mắt một hành vi mới
được thiết kế để cải thiện khả năng tương thích với mã được viết cho các trình duyệt khác khi
cuộn, cũng như bật các tình huống khác phụ thuộc vào việc sử dụng thao tác chạm
sự kiện trong khi cuộn. Tính năng này được bật theo mặc định và bạn có thể bật
tắt bằng cờ sau, chrome://flags\#touch-scrolling-mode.
Hành vi mới là:
- Thao tác chạm đầu tiên được gửi một cách đồng bộ để cho phép cuộn đã huỷ
- Trong khi chủ động cuộn
- các sự kiện chạm di chuyển được gửi không đồng bộ
- được điều tiết thành 1 sự kiện mỗi 200 mili giây hoặc nếu một khu vực CSS 15px bị giới hạn bị vượt quá
- Event.cancelable là false
- Nếu không, các sự kiện chạm di chuyển sẽ kích hoạt đồng bộ như bình thường khi cuộn chủ động chấm dứt hoặc không thể thực hiện được vì giới hạn cuộn đã đạt đến
- Sự kiện chạm luôn xảy ra khi người dùng nhấc ngón tay lên
Bạn có thể thử bản minh hoạ này trong Chrome dành cho Android và bật/tắt
chrome://flags\#touch-scrolling-mode để xem sự khác biệt.
Hãy cho chúng tôi biết suy nghĩ của bạn
Mô hình Async Touchmove có khả năng cải thiện khả năng duyệt web trên nhiều trình duyệt tương thích và bật một lớp hiệu ứng cử chỉ chạm mới. Chúng tôi quan tâm lắng nghe suy nghĩ của nhà phát triển và thấy được những việc sáng tạo bạn có thể làm với nó.