Băng chuyền bằng CSS

Adam Argyle

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

Kể 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 trình bày 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à hào hứng với những điều bạn có thể làm được.

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

Ấn tượng hơn nữa là câu chuyện về khả năng hỗ trợ tiếp cận.

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

Các thành phần của băng chuyền hiển thị dưới dạng chế độ xem cây hỗ trợ tiếp cận, trong đó các nút và thành phần thẻ được chỉ định rõ ràng để cung cấp bản xem trước nội dung mà 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ụ dành cho nhà phát triển của Chrome – Bản minh hoạ

Giới thiệu ::scroll-button() và ::scroll-marker()

Băng chuyền là một khu vực cuộn có tối đa 2 tính năng 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 1 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ử này dưới dạng phần tử đồng cấp, với vai trò thích hợp, theo thứ tự thẻ thích hợp và duy trì trạng thái của các phần tử đó. Điều này giúp việc phát triển băng chuyền hỗ trợ tiếp cận trở nên dễ dàng hơn.

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

  • Dấu cuộn
    Các thành phần <a> điều hướng trạng thái do trình duyệt cung cấp, hỗ trợ truy cập nội dung cho mọi mục được yêu cầu trong khu vực cuộn.

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

Bắt đầu với một thanh cuộn

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

CSS sau đây tạo một vùng cuộn cơ bản để sử dụng trong các bước sau để thêm nút và điểm đánh dấu. Bạn không bắt buộc phải sử dụng tính năng cuộn chụp nhanh cho băng chuyền, nhưng trong ví dụ này, chúng ta sẽ sử dụng tính năng này. 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 cuộn hiển thị mà không có cơ hội hoặc gợi ý nào khác ngoài nội dung bị cắt bớ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 trang 85% của vùng cuộn.

Đối với băng chuyền chỉ hiển thị một mục có chiều rộng đầy đủ tại mỗi thời điểm với điểm chụp nhanh khi cuộn, thì băng chuyền này sẽ có cảm giác như một mục theo số lượng mục. Đối với danh sách dài các mục có nhiều mục hiển thị cùng một 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 thành phần này như các phần tử giả lập khác, với 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ế có thể truy cập (không bắt buộc).

Trình duyệt sẽ tạo các nút thực, với nội dung của bạn bên trong, dưới dạng các thành phần đồng cấp với thanh cuộn. Giờ đây, bạn có thể sắp xếp, tạo kiểu hoặc anchor() các nút này theo nhu cầu. CSS sau đây sẽ tạo hai nút, một nút cho nút cuộn trái và một nút cho nút cuộn 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ử con trỏ thanh cuộn, điểm đánh dấu cuộn CSS có thể gợi ý 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 bất kỳ mục nào trong thanh cuộn.

Ví dụ về 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.

Danh sách các tập chương trình truyền hình theo chiều ngang sẽ xuất hiện, bắt đầu từ Tập 1 Phần 2. 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 chỉ vào để 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à là 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 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. Các điểm đánh dấu này bao gồm trạng thái :target-current khi điểm đánh dấu đang hiển thị hoặc được chụp nhanh.
  2. Tính năng điều hướng bằng bàn phím được đưa vào và hoạt động như một nhóm tiêu điểm.
  3. Trải nghiệm trình đọc màn hình và các báo cáo như danh sách thẻ.

Thêm điểm đánh dấu vào các điểm yêu thích có ý nghĩa trong thanh 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 đ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 hỗ trợ tiếp cận (không bắt buộc); số, văn bản, trống hoặc hình ảnh.

Trình duyệt tạo tất cả điểm đánh dấu và đặt các điểm đánh dấu đó 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: ' ';
    
    &: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ử đồng cấp của thanh 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.

Đánh dấu và nút cùng lúc

Khi kết hợp hai thành phần này, trải nghiệm sẽ trông giống như băng chuyền nhưng có những lợi ích sau:

  • Hoạt động khi JavaScript bị tắt.
  • Không có tính năng làm mới hoặc định cỡ từng phần (giảm CLS).
  • Sẵn sàng cho mọi loại ảnh động cuộn và trình kích hoạt.
  • Có hỗ trợ tiếp cận.
  • Dùng được bằng cảm ứng, chuột và bàn phím.

Làm ít việc hơn, tiếp cận nhiều người hơn, nhanh hơn.

Bản minh hoạ

Tài nguyên

Bài đăng này chủ yếu đề cập đến các 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 các tính năng này còn vượt xa các trường hợp sử dụng băng chuyền. Để biết toàn bộ tiềm năng của các tính năng mới này, hãy 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 trực quan và tương tác, hãy thử Trình định cấu hình băng chuyền.

Thành phần này cung cấp các nút chuyển, chẳng hạn như nút cuộn, và khi được bật, băng chuyền hiển thị sẽ ngay lập tức có các nút xuất hiện cùng với CSS được liên kết được sử dụng.

Ảnh chụp màn hình trang web 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 nút chuyển: nút cuộn, điều hướng bằng dấu chấm, trang tự động và không hoạt động. Bên dưới các nút chuyển là danh sách thẻ, sẵn sàng để thêm bất kỳ ưu đãi nào của nút chuyển.
https://chrome.dev/carousel-configurator/

Tài liệu này cũng bao gồm các ví dụ về các khái niệm nâng cao hơn 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ư "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 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 do cuộn điều khiển, truy vấn scroll-state() và nhiều tính năng khác.

Một điều thú vị là toàn bộ trang web không có JavaScript.

Ảnh chụp màn hình trang đích của 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 trải dài từ đơn giản đến phức tạp và có nhiều tính năng. Việc duyệt xem thư viện phải tạo cảm hứng, mang lại sự yên tâm và tất nhiên là có thể kiểm tra để lấy mã. 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 tiếp theo

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

Mang 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 các nút cuộn và điểm đánh dấu. Đ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 thức 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ự quay lại khi đến cuối, giống như băng chuyền tại một hội chợ. Chúng tôi đã nắm bắt được vấn đề này và dự định sẽ cung cấp một giải pháp nền tảng cho vấn đề này.

Chúng tôi hy vọng bạn sẽ thích tính năng này. Chúng tôi mong rằng tất cả người dùng web "đã tắt JavaScript" sẽ có được trải nghiệm cuộn rất tốt và giảm thiểu CLS nhờ vòng quay được tích hợp có vòng đời được căn chỉnh thời gian tốt hơn.

Bạn không cần làm nhiều việc, người dùng có trải nghiệm tuyệt vời và hiệu suất tốt hơn.