Thay đổi JavaScript DOM trong touchmove bị trì hoãn cho đến khi di chuyển kết thúc trên thiết bị di động Safari

Question

Trong safari di động, trong quá trình xử lý touchmove cho một phần tử, tôi thay đổi className của phần tử đó. Thật không may, thay đổi trực quan không xảy ra trong khi người dùng đang cuộn hoặc cho đến khi kết thúc quá trình cuộn quán tính.

Tôi có thể làm gì để có được className để xem trực quan ngay lập tức?

thêm: Rõ ràng đây không chỉ giới hạn với những thay đổi className, nhưng dường như có sự thay đổi vào DOM, chẳng hạn như innerHTML và style.

Answer 1

Điều này là do thiết kế không may. iOS safari sẽ xếp hàng tất cả thao tác DOM cho đến khi kết thúc cuộn hoặc cử chỉ. Hiệu quả DOM bị đóng băng trong khi cuộn.

Tôi nghĩ tôi có thể tìm thấy tham chiếu đến trang này trên trang dành cho nhà phát triển của Apple, nhưng tôi chỉ có thể tìm liên kết này tới jQueryMobile: http://jquerymobile.com/test/docs/api/events.html.

Lưu ý rằng thiết bị iOS đóng băng thao tác DOM trong khi cuộn, xếp hàng chúng để áp dụng khi cuộn kết thúc. Chúng tôi hiện đang điều tra các cách để cho phép thao tác DOM áp dụng trước khi cuộn bắt đầu

Hy vọng điều này sẽ hữu ích!

Answer 2

Tôi thực sự đã xây dựng trang web đó và có cách để vượt qua giới hạn này là không cuộn trang web bằng chức năng trình duyệt tích hợp nhưng giả mạo nó. JS lắng nghe sự kiện bánh xe và bàn phím cuộn và xoay vòng thuộc tính hàng đầu của thùng chứa chính thành 'scrollTop' của riêng nó. Thanh cuộn bên phải dĩ nhiên là một tùy chỉnh JS. Trong trường hợp này, nó được đồng bộ hóa với cùng giá trị 'scrollTop' nội bộ.

Toàn bộ trang web chỉ là một tween lớn thực sự, với dòng thời gian chính là vị trí scrollTop của nó và tất cả các hoạt ảnh phụ được kích hoạt tại một số thời điểm nhất định. JS không được rút gọn nên hãy xem trong tệp ScrollAnimator.js, tất cả đều ở đó.

Answer 3

Chỉ cần thay đổi vị trí thành -webkit-sticky. Không được đặt trên cùng để nó trông giống như một phần tử bình thường, nhưng hoạt động như một phần tử cố định. Và bạn có thể cập nhật kiểu của nó ngoại trừ vị trí ngay lập tức.