Tôi đang xây dựng một ứng dụng dựa trên web nhỏ bằng cách sử dụng bảng HTML. Một thuộc tính bất thường của bảng này là nó đã cố định hàng trên cùng và cột bên trái (tương tự như excel). Tôi đã thực hiện điều này bằng cách sử dụng một jQuery và CSS nhỏ.Buộc javascript để chạy * trước khi * trình duyệt vẽ lại (ví dụ jsFiddle)
Vấn đề là, sự kiện jQuery kích hoạt mã của tôi là sự kiện $ (window) .scroll và hiển nhiên hầu hết các trình duyệt (Chrome và IE) vẽ lại trang trước khi mã được gọi bởi sự kiện này kết thúc chạy. Kết quả là cột bên trái và hàng trên cùng mất một giây để "bắt kịp" phần còn lại của bảng.
Tôi đã cung cấp stripped down jsFiddle example để hiển thị cho bạn sự cố của tôi. Lưu ý: Độ trễ không đáng chú ý khi bảng quá nhỏ và (tương đối) trống nội dung. Tuy nhiên, nó là có (giả sử bạn không sử dụng firefox). Có cách nào để thoát khỏi sự chậm trễ này không?
Cảm ơn!
Có lẽ tôi hiểu lầm cách thức raf hoạt động, nhưng có vẻ như điều đó sẽ không giải quyết được hoàn toàn vấn đề của tôi, vì vấn đề của tôi liên quan đến các khung được rút ra quá sớm. Có đúng không? Hay có điều gì đó tôi không nhận được? – ihake
'requestAnimationFrame' cho phép bạn phát lệnh ngay trước khi gửi lại. Vì vậy, bất kỳ điều gì bạn thay đổi trong requestAnimationFrame sẽ hiển thị trong hình vẽ tiếp theo. Đó là một cuộc gọi lại được gọi bởi trình duyệt khi nó sắp vẽ trang web. Vấn đề của bạn rất có thể là do việc gọi syncHeadColumns ngay sau khi cuộn được vẽ (những gì bạn nghi ngờ) hoặc do quá nhiều số lần gọi cuộn được tạo ra - đó là hơn 1 sự kiện trên mỗi khung hình. Điều này gây ra sự chậm trễ trong bản cập nhật trực quan (cá nhân tôi tin rằng điều này có nhiều khả năng). Trong mọi trường hợp: Tôi tin rằng 'requestAnimationFrame' sẽ có thể trợ giúp cả hai. –
Điều tôi sẽ thử gọi là 'syncHeadColumns' từ 'requestAnimationFrame' thay vì từ sự kiện cuộn. Điều đó sẽ giảm số lượng cuộc gọi đến 'syncHeadColumns' nhưng giữ cho các tiêu đề trơn tru ở vị trí. Ngoài ra, bạn có thể muốn kiểm tra xem hành vi repaint và reflow hoạt động như thế nào trong các trình duyệt, nếu bạn chưa thực hiện điều đó. Có một số thuộc tính và thuộc tính css nhất định gây ra sự thay đổi khi chúng được thay đổi. Đây không phải là trường hợp đối với hầu hết các thuộc tính trên các phần tử 'position: fixed', nhưng có thể tôi thiếu một số thứ trong mã của bạn gây ra các phản hồi. –