Safari bổ sung hỗ trợ sự kiện scrollend, hoàn thiện khả năng tương thích trên các trình duyệt chính

Safari phiên bản 26.2, được phát hành vào tháng 12, đã chính thức bổ sung hỗ trợ cho sự kiện scrollend. Đây là một cột mốc quan trọng đối với nền tảng web, giúp sự kiện này đạt được sự hỗ trợ "baseline" (cơ bản) trên tất cả các trình duyệt chính, bao gồm cả Chrome 114, Edge 114 và Firefox 109. Sự bổ sung này lấp đầy khoảng trống tồn tại lâu nay trong mô hình sự kiện cuộn của trình duyệt, loại bỏ nhu cầu các nhà phát triển phải dựa vào các giải pháp thay thế (workarounds) thiếu ổn định để phát hiện việc cuộn trang đã kết thúc hay chưa.

Sự kiện scrollend là gì?

Sự kiện scrollend sẽ kích hoạt một lần duy nhất khi hành động cuộn trang thực sự kết thúc. Điều này áp dụng cho mọi trường hợp gây ra cuộn, bao gồm cử chỉ của người dùng, điều hướng bằng bàn phím, cuộn mượt (smooth scrolling), hoặc các lời gọi lập trình từ JavaScript như scrollTo(). Theo thông báo từ WebKit, sự kiện này cung cấp "một tín hiệu đáng tin cậy rằng việc cuộn đã kết thúc", giải quyết một vấn đề gây khó khăn cho các lập trình viên web trong nhiều năm qua.

Trước khi có scrollend, không có cách thức gốc rễ nào để biết chắc chắn khi nào một lần cuộn thực sự dừng lại. Các nhà phát triển buộc phải phán đoán dựa trên bộ hẹn giờ (timer-based debouncing), thường sử dụng setTimeout() với độ trễ khoảng 100 mili-giây hoặc hơn. Cách tiếp cận này thiếu chính xác, không đáng tin cậy và dễ dẫn đến các lỗi, chẳng hạn như sự kiện kích hoạt quá muộn hoặc trong khi ngón tay người dùng vẫn đang chạm vào màn hình.

So sánh mã nguồn: Trước và Sau

Trước đây, để phát hiện việc kết thúc cuộn, các nhà phát triển thường phải viết code như sau:

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Giờ đây, với sự hỗ trợ của trình duyệt, kết quả tương tự có thể đạt được một cách gọn gàng và sạch sẽ hơn nhiều:

document.onscrollend = event => {
  // việc cuộn đã chắc chắn kết thúc
}

Trình duyệt sẽ tự xử lý toàn bộ các đánh giá phức tạp bên trong, bao gồm việc giải phóng cảm ứng chạm (touch release), giải phóng con trỏ (pointer release), hoàn thành nhấn phím, các sự kiện cuộn dính (scroll snap) và cuộn khung nhìn trực quan (visual viewport). Sự kiện này sẽ không kích hoạt nếu vị trí cuộn không thực sự thay đổi, giúp tránh các kích hoạt sai (spurious triggers).

Phản ứng của cộng đồng lập trình viên

Cộng đồng nhà phát triển đã phản hồi tích cực trước việc Safari triển khai tính năng này. Một bài đăng trên mạng xã hội X đã nhấn mạnh rằng đây là sự bổ sung được mong chờ từ lâu, đồng thời nêu bật lợi ích đối với ứng dụng của họ:

"Tôi giờ đây có thể lưu tiến độ đọc đúng cách khi người dùng dừng cuộn, thay vì phải dùng logic dựa trên thăm dò (polling) thiếu ổn định..."

Trước khi Safari hỗ trợ tính năng này, các cuộc thảo luận trên Stack Overflow chỉ ra rằng các nhà phát triển cần sự tương thích đa trình duyệt thường phải sử dụng polyfill, với các gói thư viện như @af-utils/scrollend-polyfill được dùng để lấp đầy khoảng trống này.

Ứng dụng thực tế và hiệu năng

Các ứng dụng thực tế của scrollend là rất rộng rãi. Blog dành cho nhà phát triển của Chrome đã liệt kê các trường hợp sử dụng phổ biến bao gồm: đồng bộ hóa vị trí cuộn của carousel với các chỉ báo chấm, tải nội dung lười (lazy-loading) sau khi người dùng dừng cuộn, cập nhật giao diện người dùng dựa trên vị trí cuộn cuối cùng, lấy dữ liệu sau khi người dùng cuộn đến một tab mới, và ghi lại các sự kiện phân tích.

Sự kiện này đặc biệt có giá trị đối với các thao tác nhạy cảm về hiệu năng. Việc chạy các tác vụ tính toán nặng trong quá trình cuộn đang diễn ra có thể làm giảm trải nghiệm cuộn mượt mà, nhưng scrollend cung cấp điểm neo hoàn hảo để trì hoãn công việc đó cho đến khi không còn hành động cuộn nào diễn ra.

Tương thích và nâng cấp tiến bộ

Đối với các nhóm vẫn đang hỗ trợ các phiên bản Safari cũ hơn, việc nâng cấp tiến bộ (progressive enhancement) khá đơn giản. Các nhà phát triển có thể phát hiện sự hỗ trợ bằng 'onscrollend' và quay lại phương pháp dựa trên bộ hẹn giờ khi sự kiện này không khả dụng. Polyfill cũng là một giải pháp khác, tự động sử dụng sự kiện gốc khi có mặt và quay lại việc giám sát sự kiện con trỏ và cuộn khi không có. Tài liệu MDN cung cấp các ví dụ toàn diện và bảng tương thích, lưu ý rằng tính năng này hiện đã là cơ bản trên tất cả các trình duyệt hiện đại.

Sự kiện scrollend là một API đa nền tảng đáng tin cậy để phát hiện khi nào việc cuộn đã hoàn tất. Nó kích hoạt khi trình duyệt hoàn thành hoạt ảnh cuộn, khi cử chỉ chạm hoặc con trỏ của người dùng được giải phóng, khi điều hướng bàn phím kết thúc, và khi cuộn lập trình thông qua các API như scrollTo() hoàn tất. Nó hoạt động trên cả cuộn cấp tài liệu và các phần tử cuộn riêng lẻ, và xử lý chính xác các tương tác của khung nhìn trực quan như pinch-zoom. Đối với các nhà phát triển web, việc triển khai này trong Safari 26.2 đại diện cho mảnh ghép cuối cùng trong một nỗ lực chuẩn hóa kéo dài nhiều năm bắt đầu từ Chrome 114 vào năm 2023.