Băng chuyền bằng CSS

Adam Argyle

Ngày xuất bản: 20 tháng 3 năm 2025

Từ Chrome 135, bạn có thể sử dụng các tính năng trong quy cách CSS Overflow 5 được thiết kế để tạo trải nghiệm cuộn và băng chuyền.

Bài đăng này là thông tin tổng quan về nhiều trải nghiệm cuộn và băng chuyền được tạo bằng các tính năng mới này mà không cần JavaScript. Hãy xem video sau đây và cảm thấy hào hứng với những điều mà bạn có thể đạt được từ nay về sau.

Video này cho thấy sự hài hoà giữa các nút cuộn, điểm đánh dấu cuộn, ảnh động dựa trên thao tác cuộn, truy vấn scroll-state(), :has(), lưới, điểm neo và nhiều thành phần khác.

Câu chuyện về khả năng tiếp cận còn ấn tượng hơn nữa.

Các phương pháp hay nhất cho băng chuyền được trình duyệt xử lý nhờ sự phối hợp giữa các nhóm kỹ thuật và khả năng tiếp cận. Rất khó để tạo một băng chuyền dễ tiếp cận hơn băng chuyền này.

Các phần tử của băng chuyền xuất hiện dưới dạng chế độ xem cây hỗ trợ tiếp cận, trong đó các nút và phần tử thẻ được chỉ báo rõ ràng để cho thấy bản xem trước về những gì trình đọc màn hình sẽ thấy trong băng chuyền.
Ảnh chụp màn hình cây hỗ trợ tiếp cận của băng chuyền Công cụ cho nhà phát triển của Chrome – Bản minh hoạ

Meet ::scroll-button() và ::scroll-marker()

Băng chuyền là một vùng có thể cuộn với tối đa 2 thành phần hỗ trợ giao diện người dùng được thêm vào – nút và điểm đánh dấu.

Trong phiên bản đầu tiên của các tính năng băng chuyền CSS, các nút và điểm đánh dấu được tạo từ CSS. Trình duyệt đặt các phần tử làm phần tử ngang hàng, có vai trò thích hợp, theo đúng thứ tự thẻ và duy trì trạng thái của chúng. Điều này giúp bạn dễ dàng phát triển một băng chuyền hỗ trợ tiếp cận.

  • Nút cuộn
    Các phần tử <button> do trình duyệt cung cấp, có trạng thái và có thể tương tác, hỗ trợ truy cập nội dung và cuộn 85% vùng có thể cuộn khi được nhấn.

  • Scroll Markers
    Các phần tử điều hướng có trạng thái do trình duyệt cung cấp <a> giúp truy cập nội dung cho mọi mục được yêu cầu trong vùng cuộn.

Phần còn lại của bài đăng này minh hoạ cách tạo một băng chuyền bằng các tính năng mới này.

Bắt đầu bằng một thành phần cuộn

Bạn có thể thêm nút và điểm đánh dấu vào bất kỳ vùng có thể cuộn nào trên trang web của mình.

CSS sau đây tạo một vùng có thể cuộn cơ bản để dùng trong các bước sau nhằm thêm nút và điểm đánh dấu. Bạn không bắt buộc phải dùng tính năng cuộn nhanh cho băng chuyền, nhưng trong ví dụ này, chúng ta sẽ dùng tính năng đó. Băng chuyền cũng hoạt động cho trình cuộn dọc và trình cuộn hai chiều.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}
Một vùng có thể cuộn xuất hiện mà không có bất kỳ gợi ý hoặc dấu hiệu nào khác ngoài nội dung bị cắt.

Thêm nút cuộn bằng ::scroll-button()

Tuỳ thuộc vào hệ điều hành, có thể đã có các nút cuộn xung quanh thanh cuộn. Các nút thanh cuộn tích hợp có xu hướng đẩy một vùng cuộn, trong khi các nút cuộn CSS sẽ cuộn 85% vùng cuộn.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

Đối với những băng chuyền chỉ hiển thị một mục có chiều rộng đầy đủ tại một thời điểm với các điểm dừng cuộn, điều này sẽ giống như số lượng mục theo từng mục. Đối với danh sách dài gồm nhiều mục, trong đó có nhiều mục xuất hiện cùng lúc, danh sách này sẽ cuộn gần như toàn bộ trang.

Cách thêm nút cuộn bằng CSS:

  1. Thêm các phần tử giả này như các phần tử giả khác, bằng một bộ chọn: .carousel::scroll-button(right) cho nút cuộn sang phải.
  2. Chỉ định content bằng văn bản thay thế dự phòng dễ tiếp cận (không bắt buộc).

Trình duyệt sẽ tạo các nút thực, có nội dung bên trong, dưới dạng các thành phần ngang hàng với trình cuộn. Giờ đây, bạn có thể tự do bố trí, tạo kiểu hoặc anchor() các nút này theo nhu cầu. CSS sau đây sẽ tạo ra 2 nút, một cho nút cuộn sang trái và một cho nút cuộn sang phải.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*):focus-visible {
    outline-offset: 5px;
  }
}
Bản minh hoạ

Thêm điểm đánh dấu cuộn bằng ::scroll-marker()

Tương tự như phần tử ngón tay cái của thanh cuộn, các điểm đánh dấu cuộn CSS có thể gợi ý về kích thước của băng chuyền, đồng thời cung cấp khả năng di chuyển nhanh đến cuối hoặc đầu. Điểm đánh dấu cuộn CSS khác với thanh cuộn vì mỗi điểm đánh dấu là một đường liên kết có thể đại diện cho mọi mục trong trình cuộn.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

Để hiểu rõ sự khác biệt này, hãy xem xét các phần của một chương trình truyền hình dài tập. Thay vì tạo một điểm đánh dấu cho mỗi tập trong số 10 tập, hãy tạo 2 điểm đánh dấu chuyển đến đầu chương.

Một danh sách ngang gồm các tập chương trình truyền hình xuất hiện, bắt đầu từ Phần 2 Tập 1. Có hai tiêu đề danh sách ở trên, Phần 1 và Phần 2, mỗi tiêu đề có một mũi tên hướng về phía tiêu đề đó để gợi ý rằng đây là các điểm đánh dấu cuộn được tạo.

Lưu ý rằng các điểm đánh dấu này không phải là dấu chấm, mà đang sử dụng thuộc tính content: "Season 1" của phần tử giả. Điểm đánh dấu cũng có thể là hình thu nhỏ, thường được dùng cho băng chuyền thư viện trong các trang web thương mại điện tử hoặc trang web tập trung vào ảnh.

Điểm đánh dấu giống như đường liên kết <a> trong trang, nhưng có một số tính năng đặc biệt:

  1. Chúng bao gồm trạng thái :target-current khi điểm đánh dấu đang ở chế độ xem hoặc được gắn.
  2. Thanh điều hướng bằng bàn phím được đưa vào và hoạt động như một focusgroup.
  3. Trình đọc màn hình được đưa vào và báo cáo như một danh sách thẻ.

Thêm điểm đánh dấu vào những điểm đến hữu ích trong trình cuộn bằng các bước sau:

  1. Xác định vị trí của scroll-marker-group là before hoặc after.
  2. Chọn các địa điểm yêu thích bằng bộ chọn .carousel .point-of-interest::scroll-marker.
  3. Chỉ định content bằng văn bản thay thế dự phòng có thể truy cập (không bắt buộc); số, văn bản, nội dung trống hoặc hình ảnh.

Trình duyệt sẽ tạo tất cả các điểm đánh dấu và đặt chúng vào vùng chứa nhóm điểm đánh dấu. Ví dụ này tạo một điểm đánh dấu trống cho mỗi <li> để tạo một dấu chấm đánh dấu cho mỗi mục.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}
Bản minh hoạ

Phần tử chứa các điểm đánh dấu được gọi là ::scroll-marker-group và được tạo dưới dạng phần tử cùng cấp với trình cuộn, giống như các nút cuộn. Bạn có thể tạo kiểu và đặt vùng chứa này ở bất cứ nơi nào bạn cần.

Đồng thời đánh dấu và nhấn nút

Kết hợp cả hai, trải nghiệm sẽ giống như một băng chuyền nhưng có những lợi ích sau:

  • Hoạt động khi JavaScript bị vô hiệu hoá.
  • Không có tính năng bù nước hoặc thay đổi kích thước lười biếng (giảm CLS).
  • Sẵn sàng cho mọi loại ảnh động và điều kiện kích hoạt khi cuộn.
  • Có hỗ trợ tiếp cận.
  • Thân thiện với thao tác chạm, chuột và bàn phím.

Làm ít hơn, đạt được nhiều hơn, nhanh hơn.

Bản minh hoạ

Tài nguyên

Bài đăng này chủ yếu đề cập đến những tính năng này dưới dạng "băng chuyền", nhưng khả năng và tính hữu ích của chúng vượt xa các trường hợp sử dụng băng chuyền. Để có cái nhìn tổng quan về tiềm năng của những tính năng mới này, hãy dùng thử Thư viện băng chuyền và xem các thành phần khác như: scrollspy, thẻ và trang trình bày.

Đối với những người học bằng hình ảnh và tương tác, hãy thử Trình định cấu hình băng chuyền.

Thẻ này cung cấp các nút bật/tắt (ví dụ: nút cuộn) và khi được bật, băng chuyền xuất hiện ngay lập tức sẽ có các nút xuất hiện cùng với CSS được liên kết.

Ảnh chụp màn hình trang web của trình định cấu hình cho thấy một đoạn mã HTML của một danh sách đơn giản. Trong HTML có 4 công tắc: nút cuộn, điều hướng bằng dấu chấm, trang tự động và trơ. Bên dưới các công tắc là danh sách thẻ, sẵn sàng thêm bất kỳ ưu đãi nào trong số các công tắc.
https://chrome.dev/carousel-configurator/

Ngoài ra, phần này cũng bao gồm các ví dụ về những khái niệm nâng cao hơn có liên quan đến băng chuyền:

Một không gian giới thiệu dành cho những người tò mò về khả năng của các tính năng này, trả lời những câu hỏi như "liệu tính năng này có thể làm được X không?". Mỗi bản minh hoạ đều dựa trên một trường hợp sử dụng được tìm thấy trên Internet. Mỗi bản minh hoạ cho thấy cách điều phối các nút và điểm đánh dấu này bằng ảnh động dựa trên thao tác cuộn, truy vấn scroll-state() và nhiều thao tác khác.

Một điều thú vị là toàn bộ trang web này không sử dụng JavaScript.

Ảnh chụp màn hình trang đích của thư viện băng chuyền. Có tiêu đề chào mừng, một số thông tin về trang web và danh sách các ví dụ về băng chuyền dưới dạng đường liên kết.
https://chrome.dev/carousel/

Các ví dụ này có thể đơn giản đến mức thú vị hoặc mạnh mẽ và giàu tính năng. Việc duyệt xem thư viện phải truyền cảm hứng, mang lại sự yên tâm và tất nhiên là có thể kiểm tra mã để lấy. Tìm và kiểm tra @layer utilities để biết các tiện ích có thể giúp bạn tạo băng chuyền.

Công việc khác

Chúng tôi rất tự hào về mức độ tích hợp của các tính năng này với tất cả HTML và CSS. Khả năng hỗ trợ tiếp cận của băng chuyền CSS là tuyệt vời. Hiệu suất của băng chuyền CSS tốt hơn so với mọi giải pháp JavaScript. Trải nghiệm người dùng của băng chuyền CSS rất tự nhiên, mượt mà và phong phú. Tuy nhiên, bạn có thể cải thiện.

Mang theo các phần tử của riêng bạn

Chúng tôi đang nỗ lực để cho phép bạn thêm các thành phần của riêng mình cho nút và điểm đánh dấu cuộn. Điều này có nghĩa là bạn có thể cung cấp các thẻ <a> của riêng mình có nội dung đa dạng như biểu tượng. Bạn cũng có thể sử dụng các nút nhiều lớp của riêng mình được tạo bằng Tailwind.

Cuộn theo chu kỳ

Nhiều băng chuyền tự động quay vòng khi đến cuối, giống như một băng chuyền trong hội chợ. Chúng tôi đã biết vấn đề này và dự định cung cấp một giải pháp trên nền tảng để giải quyết vấn đề.

Chúng tôi hy vọng bạn sẽ thích tính năng này. Chúng tôi mong chờ tất cả người dùng web "đã tắt JavaScript" sẽ có được trải nghiệm di chuyển mượt mà và tất cả các mức giảm CLS nhờ vòng đời được tính thời gian tốt hơn của một băng chuyền tích hợp.

Bạn sẽ làm ít hơn, trải nghiệm người dùng tuyệt vời hơn, hiệu suất cao hơn.