Nếu có một điều mà mọi người thực sự muốn khi cuộn thì trò chơi phải trở nên mượt mà. Trước đây, Chrome hoạt động 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 lật một trang trên thiết bị di động. Tuy nhiên, nếu người dùng đã cắm chuột vào thì họ sẽ có hành vi cuộn "bước" lộn xộn hơn, điều này kém thẩm mỹ hơn nhiều. Tất cả các điều đó sắp thay đổi trong Chrome 49.
Giải pháp cho hành vi cuộn gốc, hướng đầu vào cho nhiều nhà phát triển là sử dụng các thư viện với mục tiêu là ánh xạ lại để trông mượt mà và đẹp 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 đều có những nhược điểm khác nhau khi cuộn:
- Cảm giác thung lũng kỳ lạ. Điều này thể hiện theo hai cách: thứ nhất là một trang web có thể có hành vi cuộn mượt mà, nhưng một trang web khác lại có thể không, do đó, 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, cơ chế vật lý về độ mượt của thư viện không nhất thiết phải khớp với cơ chế 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 nó có thể cảm thấy sai hoặc kỳ lạ.
- Xu hướng tranh chấp luồng chính và giật. Giống như bất kỳ JavaScript nào được thêm vào trang, tải CPU sẽ tăng lên. Đó không nhất thiết là một sự cố, tuỳ thuộc vào hoạt động khác của trang, nhưng nếu có một số tác vụ chạy trong thời gian dài trên luồng chính và thao tác cuộn đã được kết hợp với luồng chính, thì kết quả thực có thể là cuộn và giật.
- Bảo trì nhiều hơn cho nhà phát triển, nhiều mã hơn để người dùng tải xuống. Việc có một thư viện để thực hiện thao tác cuộn mượt mà cần phải được cập nhật và duy trì, đồng thời sẽ làm tăng trọng số tổng thể của trang trên trang web.
Những hạn chế này cũng thường đúng với nhiều thư viện xử lý hành vi cuộn, cho dù đó là hiệu ứng thị sai hay các ảnh động kết hợp cuộn khác. Tất cả đều quá thường gây hiện tượng giật, cản trở khả năng tiếp cận và thường làm ảnh hưởng xấu đến 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 hết sức cẩn trọng khi thay đổi hoạt động này bằng 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 từng 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ã của mình, ngoại trừ việc có thể xoá bất kỳ thư viện cuộn mượt nào nếu đã sử dụng.
Các tiện ích cuộn khác
Những tác phẩm này còn có những tính năng thú vị khác liên quan đến hoạt động cuộn mà chúng tôi cũng đang đề cập. Nhiều người trong số chúng ta muốn các hiệu ứng kết hợp cuộn, như song song, cuộn mượt mà đến một mảnh tài liệu (như example.com/#somesection). Như tôi đã đề cập trước đó, các phương pháp đang được sử dụng ngày nay thường có thể gây bất lợi cho cả nhà phát triển và người dùng. Hai tiêu chuẩn nền tảng đang được nghiên cứu để cải thiện: Compositor Worklets và thuộc tính CSS scroll-behavior.
Khăn Houdini
Worklet tổng hợp là một phần của Houdini và chưa được chi tiết hoá và triển khai đầy đủ. Tuy nhiên, khi các bản vá xuất hiện, chúng sẽ cho phép bạn viết JavaScript chạy trong quy trình của trình tổng hợp, nói chung có nghĩa là các hiệu ứng kết hợp cuộn như song song sẽ được đồng bộ 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 tác vụ khác của luồng chính), điều này có thể là một bước nhảy vọt. 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 đến, 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 vào danh sách gửi thư của Houdini!
hành vi cuộn
Khi nói đến thao tác cuộn dựa trên mảnh, thuộc tính CSS scroll-behavior là một thứ khác có thể hữu ích. Nếu muốn dùng thử, bạn sẽ rất vui khi biết sản phẩm này đã được xuất xưởng trong Firefox và bạn có thể bật tính năng này trong Chrome Canary bằng cờ “Bật các tính năng của nền tảng web thử nghiệm”. Nếu bạn đặt phần tử <body> thành scroll-behavior: smooth, tất cả các lượt cuộn được kích hoạt do các thay đổi về mảnh hoặc window.scrollTo đều sẽ được tạo ảnh động mượt mà! Cách này tốt hơn 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 việc tương tự. Với tính năng cơ bản là cuộn, điều thực sự quan trọng là phải tránh làm hỏng kỳ vọng của người dùng, vì vậy, mặc dù các tính năng này đang hoạt động không thay đổi, nhưng bạn vẫn nên áp dụng phương pháp Nâng cao tăng tiến và loại bỏ mọi thư viện cố gắng thực hiện những hành vi này.
Tiếp tục và cuộn
Kể từ Chrome 49, thao tác cuộn sẽ trở nên mượt mà hơn. Nhưng đó chưa phải là tất cả: vẫn còn nhiều điểm cải tiến tiềm năng khác có thể đạt được thông qua các thuộc tính của Houdini và CSS như smooth-scroll. Hãy dùng thử Chrome 49, cho chúng tôi biết suy nghĩ của bạn và trên hết, hãy để trình duyệt thực hiện thao tác cuộn ở nơi bạn có thể!