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.
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;
}
}
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:
- 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. - Chỉ định
contentbằ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;
}
}
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.
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:
- Các điểm đánh dấu này bao gồm trạng thái
:target-currentkhi điểm đánh dấu đang hiển thị hoặc được chụp nhanh. - 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.
- 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:
- Xác định vị trí của
scroll-marker-grouplàbeforehoặcafter. - Chọn các điểm yêu thích bằng bộ chọn
.carousel .point-of-interest::scroll-marker. - Chỉ định
contentbằ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);
}
}
}
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.
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.
- Tiêu chuẩn web
- Chrome
Trình định cấu hình băng chuyền
Đố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.
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:
Thư việ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.
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.