Cuộn được kiểm soát tốt bằng CSS Scroll Snap

Tạo trải nghiệm cuộn được kiểm soát tốt bằng cách khai báo vị trí chụp nhanh cuộn.

Robert Flack

Majid Valipour

Tính năng CSS Scroll Snap (Cuộn nhanh 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 vị trí cuộn nhanh. Hai ví dụ thường dùng cho trường hợp này là bài viết được phân trang và băng chuyền hình ảnh. CSS Scroll Snap cung cấp một API nhất quán và dễ sử dụng để tạo các mẫu trải nghiệm người dùng phổ biến này.

Thông tin khái quát

Trường hợp sử dụng tính năng cuộn nhanh

Cuộn là một cách phổ biến và tự nhiên để tương tác với nội dung trên web. Đây là phương tiện gốc của nền tảng để cung cấp quyền truy cập vào nhiều thông tin hơn so với số lượng thông tin hiển thị trên màn hình cùng một lúc, trở nên đặc biệt quan trọng trên các nền tảng di động có không gian màn hình hạn chế. Vì vậy, không có gì ngạc nhiên khi các tác giả web ngày càng thích sắp xếp nội dung thành danh sách phẳng có thể cuộn thay vì hệ phân cấp sâu.

Nhược điểm chính của tính năng cuộn là thiếu độ chính xác. Hiếm khi một lượt cuộn được căn chỉnh với một đoạn hoặc câu. Điều này càng rõ ràng hơn đối với nội dung được phân trang hoặc được liệt kê có ranh giới có ý nghĩa khi thao tác cuộn kết thúc ở giữa trang hoặc hình ảnh, khiến nội dung đó chỉ hiển thị một phần. Các trường hợp sử dụng này hưởng lợi từ trải nghiệm cuộn được kiểm soát tốt.

Các nhà phát triển web từ lâu đã dựa vào các giải pháp dựa trên JavaScript để kiểm soát thao tác cuộn nhằm giải quyết điểm yếu này. Tuy nhiên, các giải pháp dựa trên JavaScript không cung cấp được giải pháp về độ trung thực đầy đủ do thiếu các dữ liệu nguyên gốc tuỳ chỉnh thao tác cuộn hoặc quyền truy cập vào tính năng cuộn tổng hợp. Tính năng CSS Scroll Snap đảm bảo một giải pháp nhanh chóng, có độ chân thực cao và dễ sử dụng, hoạt động nhất quán trên các trình duyệt.

CSS Scroll Snap cho phép tác giả web đánh dấu từng vùng chứa cuộn bằng ranh giới cho các thao tác cuộn cần kết thúc. Sau đó, trình duyệt chọn vị trí kết thúc phù hợp nhất tuỳ thuộc vào các chi tiết cụ thể của thao tác cuộn, bố cục và chế độ hiển thị của vùng chứa cuộn cũng như chi tiết về vị trí chụp nhanh, sau đó tạo ảnh động cho vị trí đó một cách mượt mà. Quay lại ví dụ trước, khi người dùng cuộn xong băng chuyền, hình ảnh hiển thị sẽ tự động căn chỉnh vào đúng vị trí. Không cần điều chỉnh thao tác cuộn đối với JavaScript.

Tính năng cuộn chụp nhanh CSS

Thao tác chụp nhanh cuộn là hành động điều chỉnh độ lệch cuộn của vùng chứa cuộn để ở vị trí chụp nhanh ưu tiên sau khi thao tác cuộn kết thúc.

Bạn có thể chọn vùng chứa cuộn để chụp nhanh bằng cách sử dụng thuộc tính scroll-snap-type. Thao tác này cho trình duyệt biết rằng trình duyệt nên cân nhắc chụp nhanh vùng chứa cuộn này vào các vị trí chụp nhanh do các phần tử con tạo ra. scroll-snap-type xác định trục mà thao tác cuộn xảy ra: x, y hoặc both và độ nghiêm ngặt của thao tác chụp nhanh: mandatory, proximity. Chúng ta sẽ nói thêm về các tính năng này ở phần sau.

Bạn có thể tạo vị trí chụp nhanh bằng cách khai báo căn chỉnh mong muốn trên một phần tử. Vị trí này là độ lệch cuộn tại vị trí vùng chứa cuộn gốc gần nhất và phần tử được căn chỉnh như đã chỉ định cho trục đã cho. Có thể căn chỉnh sau đây trên mỗi trục: start, end, center.

Căn chỉnh start có nghĩa là cạnh bắt đầu của điểm chụp nhanh vùng chứa cuộn phải khớp với cạnh bắt đầu của vùng chụp nhanh phần tử. Tương tự, các chế độ căn chỉnh end và center có nghĩa là cạnh cuối hoặc tâm của điểm chụp nhanh vùng chứa cuộn phải khớp với cạnh cuối hoặc tâm của vùng chụp nhanh phần tử.

Các ví dụ sau minh hoạ cách sử dụng các khái niệm này.

Ví dụ: Thư viện ngang

Một trường hợp sử dụng phổ biến của tính năng chụp nhanh khi cuộn là băng chuyền hình ảnh. Ví dụ: để tạo một băng chuyền hình ảnh ngang chụp nhanh từng hình ảnh khi bạn cuộn, chúng ta có thể chỉ định vùng chứa cuộn để có một scroll-snap-type bắt buộc trên trục ngang. Hãy đặt mỗi hình ảnh thành scroll-snap-align: center để đảm bảo rằng hình ảnh chụp nhanh căn giữa hình ảnh trong băng chuyền.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

<div id="gallery">
  <img src="cat.jpg">
  <img src="dog.jpg">
  <img src="another_cute_animal.jpg">
</div>

Vì vị trí chụp nhanh được liên kết với một phần tử, nên thuật toán chụp nhanh có thể thông minh về thời điểm và cách chụp nhanh dựa trên phần tử và kích thước vùng chứa cuộn. Ví dụ: hãy xem xét trường hợp một hình ảnh lớn hơn băng chuyền. Thuật toán chụp nhanh đơn giản có thể ngăn người dùng xoay xung quanh để xem toàn bộ hình ảnh. Tuy nhiên, quy cách yêu cầu các phương thức triển khai phải phát hiện trường hợp này và cho phép người dùng tự do cuộn xung quanh trong hình ảnh đó chỉ bằng cách chụp nhanh các cạnh của hình ảnh.

Ví dụ: một trang sản phẩm theo hành trình

Một trường hợp phổ biến khác có thể hưởng lợi từ tính năng chụp nhanh thao tác cuộn là các trang có nhiều phần logic để cuộn theo chiều dọc, ví dụ: trang sản phẩm thông thường. scroll-snap-type: y proximity; phù hợp tự nhiên hơn cho các trường hợp như thế này. Tính năng này không gây cản trở khi người dùng cuộn đến giữa một phần cụ thể, mà còn chụp nhanh và thu hút sự chú ý đến một phần mới khi họ cuộn đủ gần.

Sau đây là cách thực hiện việc này:

article {
  scroll-snap-type: y proximity;
  /* Reserve space for header plus some extra space for sneak peeking. */
  scroll-padding-top: 15vh;
  overflow-y: scroll;
}
section {
  /* Snap align start. */
  scroll-snap-align: start;
}
header {
  position: fixed;
  height: 10vh;
}

<article>
  <header> Header </header>
  <section> Section One </section>
  <section> Section Two </section>
  <section> Section Three </section>
</article>

Khoảng đệm và lề cuộn

Trang sản phẩm có tiêu đề trên cùng ở vị trí cố định. Thiết kế cũng yêu cầu một số phần trên cùng vẫn hiển thị khi vùng chứa cuộn được chụp nhanh để cung cấp thông báo thiết kế cho người dùng về nội dung ở trên.

Thuộc tính scroll-padding là một thuộc tính css mới, có thể dùng để điều chỉnh vùng có thể xem hiệu quả của vùng chứa cuộn hoặc ảnh chụp nhanh, dùng khi tính toán căn chỉnh ảnh chụp nhanh khi cuộn. Thuộc tính này xác định một phần lồng ghép vào hộp khoảng đệm của vùng chứa cuộn. Trong ví dụ của chúng ta, 15vh lồng ghép bổ sung được thêm vào đầu trang, hướng dẫn trình duyệt xem xét vị trí thấp hơn, 15vh bên dưới cạnh trên cùng của vùng chứa cuộn, làm cạnh bắt đầu dọc để cuộn chụp nhanh. Khi chụp nhanh, cạnh bắt đầu của phần tử mục tiêu chụp nhanh sẽ khớp với vị trí mới này, do đó để lại khoảng trống ở phía trên.

Thuộc tính scroll-margin xác định số lượng ban đầu dùng để điều chỉnh hộp hiệu quả của mục tiêu chụp nhanh tương tự như cách scroll-padding hoạt động trên vùng chứa cuộn chụp nhanh.

Bạn có thể nhận thấy rằng hai thuộc tính này không có từ "snap". Điều này là có chủ ý vì các phương thức này thực sự sửa đổi hộp cho tất cả các thao tác cuộn liên quan chứ không chỉ là cuộn chụp nhanh. Ví dụ: Chrome xem xét các kích thước này khi tính toán kích thước trang cho các thao tác cuộn phân trang như PageDown và PageUp khi tính toán số lượt cuộn cho thao tác Element.scrollIntoView().

Tương tác với các API cuộn khác

API cuộn DOM

Tính năng cuộn tự động xảy ra sau tất cả các thao tác cuộn, bao gồm cả các thao tác do tập lệnh khởi tạo. Khi bạn đang sử dụng các API như Element.scrollTo, trình duyệt sẽ tính toán vị trí cuộn dự kiến của thao tác, sau đó áp dụng logic chụp nhanh thích hợp để tìm vị trí được chụp nhanh cuối cùng. Do đó, tập lệnh người dùng không cần thực hiện bất kỳ phép tính thủ công nào để chụp nhanh.

Cuộn mượt mà

Tính năng cuộn mượt kiểm soát hành vi của thao tác cuộn theo lập trình, trong khi tính năng chụp nhanh khi cuộn xác định đích đến của thao tác đó. Vì các thành phần này kiểm soát các khía cạnh vuông góc của thao tác cuộn, nên chúng có thể được sử dụng cùng nhau và bổ sung cho nhau.

Hành vi cuộn quá mức

API hành vi cuộn quá mức kiểm soát cách cuộn được liên kết qua nhiều phần tử và không bị ảnh hưởng bởi ảnh chụp nhanh.

Lưu ý và phương pháp hay nhất

Tránh sử dụng tính năng chụp nhanh bắt buộc khi các phần tử mục tiêu có khoảng cách lớn. Điều này có thể khiến nội dung ở giữa các vị trí chụp nhanh không truy cập được.

Trong nhiều trường hợp, bạn có thể thêm tính năng chụp nhanh thao tác cuộn dưới dạng một tính năng nâng cao mà không cần phải phát hiện tính năng. Nếu cần, hãy sử dụng @supports hoặc CSS.supports để phát hiện tính năng hỗ trợ CSS Scroll Snap. Tránh sử dụng scroll-snap-type (cũng có trong thông số kỹ thuật không dùng nữa).

Phát hiện tính năng trong CSS

@supports (scroll-snap-align: start) {
  article {
    scroll-snap-type: y proximity;
    scroll-padding-top: 15vh;
    overflow-y: scroll;
  }
}

Phát hiện tính năng trong JavaScript

if (CSS.supports('scroll-snap-align: start')) {
  // use css scroll snap
} else {
  // use fallback
}

Đừng giả định rằng các API cuộn theo phương thức lập trình như Element.scrollTo luôn kết thúc ở độ dời cuộn được yêu cầu. Tính năng cuộn chụp nhanh có thể điều chỉnh độ dời cuộn sau khi quá trình cuộn theo lập trình hoàn tất. Xin lưu ý rằng đây không phải là giả định tốt ngay cả trước khi cuộn nhanh vì thao tác cuộn có thể bị gián đoạn vì các lý do khác, nhưng đặc biệt là trường hợp cuộn nhanh.

Công việc trong tương lai

Trải nghiệm cuộn là trọng tâm của một cuộc khảo sát gần đây của nhóm Chrome. Kết quả khảo sát đã xác định một số khía cạnh cần được cải thiện để thu hẹp khoảng cách giữa thư viện trình bổ trợ và CSS. Công việc sắp tới sẽ tập trung vào scroll-snap, bao gồm:

1. Khả năng tương thích và phạm vi cung cấp API trên các trình duyệt.
2. Làm việc trên các API CSS mới như scroll-start.
3. Làm việc trên các sự kiện JS mới như snapChanged().