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