Kể từ Chrome 81, bạn không cần thêm trình nghe sự kiện để buộc khôi phục lại nữa.
CSS Scroll Snap cho phép các nhà phát triển web tạo trải nghiệm cuộn được kiểm soát tốt bằng cách khai báo các vị trí chụp nhanh cuộn. Một thiếu sót của cách triển khai hiện tại là tính năng chụp nhanh khi cuộn không hoạt động tốt khi bố cục thay đổi, chẳng hạn như khi khung nhìn được đổi kích thước hoặc xoay thiết bị. Lỗi này được khắc phục trong Chrome 81.
Khả năng tương thích
Nhiều trình duyệt có tính năng hỗ trợ cơ bản cho CSS Scroll Snap. Hãy xem bài viết Tôi có thể sử dụng CSS Scroll Snap không? để biết thêm thông tin.
Chrome hiện là trình duyệt duy nhất triển khai tính năng chụp nhanh khi cuộn sau khi thay đổi bố cục. Firefox có một vé mở để triển khai việc này và Safari cũng có một vé mở để chụp lại sau khi nội dung của thanh cuộn thay đổi. Hiện tại, bạn có thể mô phỏng hành vi này bằng cách thêm mã sau vào trình nghe sự kiện để buộc thực thi chụp nhanh:
javascript
scroller.scrollBy(0,0);
Tuy nhiên, điều này không đảm bảo rằng trình cuộn sẽ điều chỉnh theo cùng một phần tử.
Thông tin khái quát
Nút cuộn CSS
Tính năng CSS Scroll Snap cho phép nhà phát triển web tạo ra trải nghiệm cuộn được kiểm soát tốt bằng cách khai báo các vị trí cuộn cuộn. Những vị trí này đảm bảo rằng nội dung có thể cuộn được căn chỉnh đúng cách với vùng chứa của nó để khắc phục các vấn đề cuộn không chính xác. Nói cách khác là chụp nhanh khi cuộn:
- Ngăn các vị trí cuộn không hợp lý khi cuộn.
- Tạo hiệu ứng phân trang thông qua nội dung.
Bài viết được phân trang và băng chuyền hình ảnh là hai trường hợp sử dụng ảnh chụp nhanh cuộn.
Nhược điểm
Chế độ chụp nhanh khi cuộn cho phép người dùng dễ dàng di chuyển qua nội dung, nhưng tính năng này không thể thích ứng với những thay đổi về nội dung và bố cục đã khiến người dùng khó có thể tận hưởng một số lợi ích tiềm năng của chế độ này. Như trong ví dụ ở trên, người dùng phải điều chỉnh lại vị trí cuộn bất cứ khi nào đổi kích thước cửa sổ để tìm phần tử đã chụp nhanh trước đó. Một số trường hợp phổ biến gây ra thay đổi về bố cục là:
- Đổi kích thước cửa sổ
- Xoay thiết bị
- Mở Công cụ cho nhà phát triển
Hai tình huống đầu tiên khiến CSS Scroll Snap ít hấp dẫn hơn đối với người dùng và tình huống thứ ba là cơn ác mộng đối với các nhà phát triển khi gỡ lỗi. Nhà phát triển cũng cần cân nhắc những thiếu sót này khi cố gắng tạo trải nghiệm động có hỗ trợ các thao tác như thêm, xoá hoặc di chuyển nội dung.
Cách khắc phục phổ biến cho vấn đề này là thêm những trình nghe thực thi thao tác cuộn có lập trình qua JavaScript để buộc chụp nhanh bất cứ khi nào có thay đổi về bố cục được đề cập ở trên. Giải pháp này có thể không hiệu quả khi người dùng muốn thanh cuộn quay lại cùng nội dung như trước đây. Mọi hoạt động xử lý thêm bằng JavaScript dường như gần như đánh bại mục đích của tính năng CSS này.
Tích hợp sẵn tính năng hỗ trợ chụp lại sau khi thay đổi bố cục trong Chrome 81
Các lỗi được đề cập không còn tồn tại trong Chrome 81: thanh cuộn sẽ vẫn bị chụp nhanh ngay cả sau khi thay đổi bố cục. Chúng sẽ đánh giá lại các vị trí cuộn sau khi thay đổi bố cục và gắn lại đến vị trí chụp nhanh nhất nếu cần. Nếu trước đó trình cuộn được gắn vào một phần tử vẫn tồn tại sau khi thay đổi bố cục, thì trình cuộn này sẽ cố gắn lại phần tử đó. Hãy chú ý đến điều sẽ xảy ra khi bố cục thay đổi trong ví dụ sau.
NOPE và thay đổi hướng thiết bị từ dọc sang ngang, một màn hình trống sẽ xuất hiện, cho biết vị trí cuộn chụp đã mất.
NOPE vẫn xuất hiện trong khung hiển thị mặc dù hướng thiết bị thay đổi nhiều lần.
Hãy xem phần Chụp lại sau khi thay đổi bố cục để biết thêm thông tin chi tiết.
Ví dụ: Thanh cuộn cố định
Với tính năng "Chụp nhanh sau khi thay đổi bố cục", nhà phát triển có thể triển khai thanh cuộn cố định với một vài dòng CSS:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
Bạn muốn tìm hiểu thêm? Hãy xem giao diện người dùng minh hoạ của cuộc trò chuyện sau đây để biết hình ảnh.
Công việc trong tương lai
Tất cả hiệu ứng cuộn nhanh hiện tại đều diễn ra ngay lập tức; một giải pháp tiếp theo có thể là hỗ trợ chụp lại nhanh bằng hiệu ứng cuộn mượt mà. Hãy xem vấn đề về quy cách để biết thông tin chi tiết.
Ý kiến phản hồi
Phản hồi của bạn là vô giá trong việc giúp việc chụp lại nhanh hơn sau khi thay đổi bố cục, vì vậy, hãy tiếp tục dùng thử và cho các kỹ sư của Chromium biết suy nghĩ của bạn.