Kể từ Chrome 81, bạn không cần thêm trình nghe sự kiện để buộc chụp ảnh lại.
Ảnh chụp màn hình cuộn CSS cho phép 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 cuộn vị trí chụp nhanh. Một thiếu sót của việc triển khai hiện tại là chụp nhanh cuộn không hoạt động tốt khi bố cục thay đổi, chẳng hạn như khi khung nhìn đổ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 tác
Nhiều trình duyệt có hỗ trợ cơ bản cho CSS Scroll Snap. Xem bài viết Tôi có thể sử dụng CSS không Cuộn Snap? để 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 thao tác cuộn sau bố cục
thay đổi. Firefox có
vé mở cho
triển khai tính năng này và Safari cũng có
yêu cầu để chụp lại sau khi
nội dung của trình 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 đây đến trình nghe sự kiện để buộc thực thi thao tác 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ẽ quay lại như cũ
.
Thông tin khái quát
Ảnh chụp nhanh khi cuộn CSS
Tính năng CSS Scroll Snap cho phép các nhà phát triển web tạo trải nghiệm cuộn bằng cách khai báo vị trí chụp nhanh cuộn. Các 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 vấn đề cuộn không chính xác. Nói cách khác, thao tác chụp nhanh cuộn:
- Ngăn các vị trí cuộn khó xử 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 phổ biến cho thao tác cuộn chụp nhanh.
Hạn chế
Tính năng chụp nhanh cuộn cho phép người dùng dễ dàng di chuyển qua nội dung, tuy nhiên không có khả năng thích ứng với những thay đổi về nội dung và bố cục chặn một số tiềm năng các lợi ích khác. 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 thay đổi kích thước cửa sổ thành tìm phần tử được chụp nhanh trước đó. Một số trường hợp phổ biến dẫn đến bố cục thay đổi 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 làm cho CSS Scroll Snap kém hấp dẫn đối với người dùng và thứ ba là vấn đề ác ý đối với các nhà phát triển khi gỡ lỗi. Nhà phát triển cũng cần hãy xem xét những nhược điểm này khi cố gắng tạo trải nghiệm linh hoạt 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 lỗi này là thêm trình nghe thực thi thao tác cuộn có lập trình qua JavaScript để buộc chụp nhanh thực thi bất cứ khi nào bất kỳ bố cục nào được đề cập trong số này thay đổi xảy ra. Giải pháp này có thể không hiệu quả khi người dùng mong đợi trình cuộn để quay lại cùng nội dung như trước đây. Bất kỳ xử lý nào khác với JavaScript có vẻ gần như không đạt được mục đích của tính năng CSS này.
Tích hợp tính năng hỗ trợ chụp lại sau khi thay đổi bố cục trong Chrome 81
Những thiếu sót được đề cập không còn tồn tại trong Chrome 81: trình cuộn sẽ vẫn còn chụp nhanh ngay cả sau khi thay đổi bố cục. Họ sẽ đánh giá lại vị trí cuộn sau thay đổi bố cục và chụp lại tới 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 thay đổi bố cục, thì trình cuộn sẽ cố gắng quay trở lại. Chú ý đến điều gì xảy ra khi bố cục thay đổi trong: ví dụ.
NOPE và thay đổi hướng thiết bị
từ dọc sang ngang, một màn hình trống sẽ hiển thị, cho biết rằng
vị trí chụp nhanh cuộn bị mất.
NOPE vẫn hiển thị trong khung hiển thị ngay cả khi hướng thiết bị thay đổi nhiều lần.
Xem phần Chụp lại sau khi thay đổi bố cục thông số kỹ thuật để biết thêm chi tiết.
Ví dụ: Thanh cuộn cố định
Với tính năng "Chụp sau khi thay đổi bố cục", nhà phát triển có thể triển khai thanh cuộn cố định bằng một vài các dòng của 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? Xem cuộc trò chuyện minh hoạ sau đây Giao diện người dùng cho hình ảnh.
Công việc trong tương lai
Tất cả hiệu ứng cuộn chụp lại hiện tại đều diễn ra tức thì; lượt theo dõi tiềm năng là để hỗ trợ chụp lại bằng thao tác cuộn mượt mà hiệu ứng. Xem vấn đề về thông số kỹ thuật để biết thông tin chi tiết.
Phản hồi
Ý kiến phản hồi của bạn sẽ giúp ích rất nhiều trong việc cải thiện tính năng chụp ảnh lại sau khi thay đổi bố cục, vì vậy hãy tiếp tục và dùng thử ứng dụng đó và cho phép các kỹ sư Chromium biết những gì bạn suy nghĩ.