Nếu có một điều mà mọi người thực sự muốn từ thao tác cuộn, đó là thao tác cuộn phải mượt mà. Trước đây, Chrome đã có tính năng cuộn mượt mà ở một số nơi, chẳng hạn như khi người dùng cuộn bằng bàn di chuột hoặc hất một trang trên thiết bị di động. Tuy nhiên, nếu người dùng cắm chuột, họ sẽ thấy hành vi cuộn "nhấp chuột" bị giật hơn, kém thẩm mỹ hơn nhiều. Tất cả những điều đó sắp thay đổi trong Chrome 49.
Giải pháp cho hành vi cuộn gốc, do đầu vào điều khiển cho nhiều nhà phát triển là sử dụng thư viện, mục tiêu là ánh xạ lại hành vi đó thành một hành vi mượt mà và dễ nhìn hơn. Người dùng cũng thực hiện việc này thông qua các tiện ích. Tuy nhiên, cả thư viện và tiện ích thay đổi thao tác cuộn đều có những điểm hạn chế:
- Cảm giác về thung lũng kỳ lạ. Điều này thể hiện theo hai cách: thứ nhất, một trang web có thể có hành vi cuộn mượt mà nhưng trang web khác thì không, vì vậy, người dùng có thể cảm thấy mất phương hướng do sự không nhất quán. Thứ hai, hiệu ứng vật lý mượt mà của thư viện không nhất thiết phải khớp với hiệu ứng vật lý của nền tảng. Vì vậy, mặc dù chuyển động có thể mượt mà nhưng có thể cảm thấy sai hoặc kỳ lạ.
- Tăng khả năng xảy ra tranh chấp và giật luồng chính. Giống như mọi JavaScript được thêm vào trang, tải CPU sẽ tăng lên. Điều đó không nhất thiết là một thảm họa, tuỳ thuộc vào những việc khác mà trang đang làm, nhưng nếu có một số công việc chạy trong thời gian dài trên luồng chính và thao tác cuộn đã được ghép nối với luồng chính, thì kết quả cuối cùng có thể là thao tác cuộn bị giật và bị giật.
- Nhà phát triển phải bảo trì nhiều hơn, người dùng phải tải nhiều mã hơn. Bạn cần phải cập nhật và duy trì thư viện để cuộn mượt mà, đồng thời thư viện này sẽ làm tăng trọng lượng tổng thể của trang trên trang web.
Những hạn chế này cũng thường xảy ra với nhiều thư viện xử lý hành vi cuộn, cho dù đó là hiệu ứng thị sai hay ảnh động kết hợp với cuộn khác. Các vấn đề này thường xuyên gây ra hiện tượng giật, cản trở khả năng hỗ trợ tiếp cận và thường làm giảm trải nghiệm người dùng. Cuộn là một hoạt động tương tác cốt lõi của web và bạn cần phải cẩn thận khi thay đổi hoạt động này bằng các thư viện.
Trong Chrome 49, hành vi cuộn mặc định sẽ thay đổi trên Windows, Linux và ChromeOS. Hành vi cuộn theo bước cũ sẽ biến mất và thao tác cuộn sẽ mượt mà theo mặc định! Bạn không cần thay đổi mã, ngoại trừ việc xoá mọi thư viện cuộn mượt mà nếu đã sử dụng.
Các tính năng cuộn khác
Ngoài ra, còn có một số tính năng hữu ích khác liên quan đến thao tác cuộn đang được phát triển và cũng đáng được đề cập. Nhiều người trong chúng ta muốn có các hiệu ứng kết hợp với thao tác cuộn, chẳng hạn như hiệu ứng thị sai, cuộn mượt đến một mảnh tài liệu (chẳng hạn như example.com/#somesection). Như tôi đã đề cập trước đó, các phương pháp được sử dụng hiện nay thường có thể gây bất lợi cho cả nhà phát triển và người dùng. Có hai tiêu chuẩn nền tảng đang được phát triển có thể giúp ích: Compositor Worklets và thuộc tính CSS scroll-behavior.
Houdini
Compositor Worklets là một phần của Houdini và chưa được triển khai và chỉ định đầy đủ. Tuy nhiên, khi các bản vá được phát hành, bạn sẽ có thể viết JavaScript chạy trong quy trình của trình kết hợp. Nói chung, điều này có nghĩa là các hiệu ứng kết hợp với thao tác cuộn như hiệu ứng thị sai sẽ được đồng bộ hoá hoàn hảo với vị trí cuộn hiện tại. Với cách xử lý thao tác cuộn hiện nay, trong đó các sự kiện cuộn chỉ được gửi định kỳ đến luồng chính (và có thể bị chặn bởi các tác vụ khác trên luồng chính), đây sẽ là một bước tiến lớn. Nếu bạn quan tâm đến Compositor Worklets hoặc bất kỳ tính năng mới thú vị nào khác mà Houdini mang lại, hãy xem bài đăng Giới thiệu về Houdini của Surma, thông số kỹ thuật của Houdini và đóng góp ý kiến của bạn vào danh sách gửi thư của Houdini!
scroll-behavior
Khi nói đến tính năng cuộn dựa trên mảnh, thuộc tính CSS scroll-behavior cũng có thể giúp ích. Nếu muốn dùng thử, bạn sẽ rất vui khi biết rằng tính năng này đã được cung cấp trong Firefox và bạn có thể bật tính năng này trong Chrome Canary bằng cờ “Enable experimental Web Platform features” (Bật tính năng thử nghiệm của Nền tảng web). Nếu bạn đặt phần tử <body> thành scroll-behavior: smooth, tất cả các thao tác cuộn được kích hoạt bằng các thay đổi về mảnh hoặc window.scrollTo sẽ được tạo ảnh động một cách mượt mà! Điều này tốt hơn nhiều so với việc phải sử dụng và duy trì mã từ một thư viện cố gắng thực hiện cùng một việc. Với một tính năng cơ bản như cuộn, điều quan trọng là bạn phải tránh làm người dùng thất vọng. Vì vậy, mặc dù các tính năng này đang thay đổi, nhưng bạn vẫn nên áp dụng phương pháp Cải tiến dần và xoá mọi thư viện cố gắng polyfill các hành vi này.
Tiếp tục và cuộn
Kể từ Chrome 49, thao tác cuộn sẽ mượt mà hơn. Nhưng đó chưa phải là tất cả: có nhiều điểm cải tiến tiềm năng khác có thể ra mắt, thông qua Houdini và các thuộc tính CSS như smooth-scroll. Hãy dùng thử Chrome 49, cho chúng tôi biết ý kiến của bạn và quan trọng nhất là hãy để trình duyệt cuộn khi bạn có thể!