Sẵn sàng cho kiểm thử của nhà phát triển: Vùng chứa có thể cuộn trên một trục

Bramus
Free Debreuil
Free Debreuil
LinkedIn

Xuất bản: Ngày 4 tháng 9 năm 2026

Tính năng "vùng chứa cuộn một trục" mở rộng thuộc tính CSS overflow để hỗ trợ các giá trị có thể cuộn (auto, scroll, hidden) kết hợp với clip (ví dụ: overflow: scroll clip), dẫn đến vùng chứa cuộn chỉ cho một trục.

Mặc dù thay đổi này mở ra các tính năng được yêu cầu nhiều như định vị cố định theo trục, nhưng nó cũng gây ra các tác dụng phụ khác trên các tính năng khác phụ thuộc vào thao tác cuộn. Do những rủi ro tiềm ẩn về khả năng tương thích này, chúng tôi yêu cầu nhà phát triển kiểm thử trang web của họ và gửi ý kiến phản hồi trước khi tính năng này được triển khai cho các kênh ổn định.

Tính năng này có sẵn để nhà phát triển kiểm thử trong Chrome 153 trên các kênh phát hành Beta, Dev và Canary. Bạn không cần bật cờ.

Điểm bất thường khi đặt thuộc tính tràn trên một trục

Nếu không có tính năng này, bạn không thể tạo vùng chứa cuộn một trục thực sự bằng CSS. Nếu bạn định cấu hình một trục để cuộn trong khi cố gắng giữ cho trục kia hiển thị (ví dụ: đặt overflow-x: scroll và để nguyên overflow-y: visible), thì công cụ tạo kiểu của trình duyệt sẽ tự động buộc trục hiển thị tính toán thành auto (hoặc scroll). Điều này sẽ tạo ra một trình cuộn hai chiều ngay cả khi bạn không có ý định làm như vậy.

Lỗi này sẽ rất dễ thấy khi bạn cố gắng tạo một bảng có hàng trên cùng và cột đầu tiên cố định. Trong ví dụ sau, mục tiêu là cột đầu tiên sẽ dính vào .table-wrapper di chuyển theo chiều ngang và hàng trên cùng sẽ dính vào trình cuộn của tài liệu.

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    …
  </table>
</div>

/* Scroll horizontally */
.table-wrapper {
  overflow-x: auto;
}

/* Sticky top row */
.table-wrapper thead {
  position: sticky;
  top: 0;
}

/* Sticky first column */
.table-wrapper td:first-child {
  position: sticky;
  left: 0;
}

Nếu thử, bạn sẽ nhận thấy rằng cách này không hiệu quả. Lý do là vì lỗi tràn được mô tả trước đó: .table-wrapper thực sự trở thành một trình cuộn hai chiều. Vì vậy, khi position: sticky tra cứu thành phần cuộn tổ tiên gần nhất cho từng trục, kết quả là phần tử .table-wrapper trong cả hai trường hợp.

Minh hoạ trực tiếp

Bản ghi âm minh hoạ

Vùng chứa có thể cuộn trên một trục sẽ khắc phục điểm bất thường này

Với vùng chứa có thể cuộn trên một trục, bạn có thể ngăn trục phụ trở thành một thành phần có thể cuộn bằng cách sử dụng clip. Bằng cách đó, position: sticky có thể theo dõi độc lập hai vùng chứa có thể cuộn riêng biệt.

Để sửa ví dụ về bảng, hãy ghép chế độ cuộn ngang với overflow-y: clip.

.table-wrapper {
  overflow-x: auto;
  overflow-y: clip;
}

Hoặc sử dụng ký hiệu viết tắt overflow:

.table-wrapper {
  overflow: auto clip;
}

Bằng cách này, .table-wrapper chỉ đóng vai trò là vùng chứa có thể cuộn cho trục x. Giờ đây, hàng trên cùng được ghim sẽ bỏ qua và được ghim chính xác vào trình cuộn của tài liệu trên trục y, trong khi cột đầu tiên tiếp tục được ghim vào .table-wrapper theo chiều ngang.

Nếu đang xem bài đăng này trong một trình duyệt có hỗ trợ, bạn có thể thấy tính năng này hoạt động trong bản minh hoạ sau:

Minh hoạ trực tiếp

Bản ghi âm minh hoạ

Hành vi bị ảnh hưởng

Vì vùng chứa cuộn một trục thay đổi cách đánh giá và tạo ngữ cảnh cuộn, nên bạn có thể nhận thấy những thay đổi trên các tính năng khác dựa vào vùng chứa cuộn, chẳng hạn như:

  • position: sticky: Như minh hoạ, các phần tử hiện sẽ dính chính xác trong các vùng chứa cuộn một trục, cải thiện hành vi cho các phần tử bị overflow: clip hạn chế trên một trục.
  • overscroll-behavior: Vì giờ đây, một phần tử có thể là vùng chứa có thể cuộn chỉ trên một trục, nên overscroll-behavior có thể không còn kích hoạt trên trục bị cắt, có khả năng ảnh hưởng đến hiệu ứng kéo để làm mới hoặc hiệu ứng nảy tuỳ chỉnh. Thay đổi này về hành vi phù hợp với Firefox và Safari.
  • Thao tác cuộn có lập trình: Việc gọi các API cuộn (chẳng hạn như Element.scrollTo()) trên một vùng chứa cuộn một trục hiện áp dụng các quy tắc ràng buộc về thao tác cuộn có lập trình. Phần tử sẽ từ chối cuộn theo phương thức lập trình dọc theo trục được xác định là clip.
  • Kích thước ô tối thiểu của lưới và bố cục linh hoạt: Đối với các vùng chứa có thể cuộn trong bố cục lưới và bố cục linh hoạt, kích thước tối thiểu mặc định (min-width: auto) thường bị bỏ qua để cho phép các ô tự điều chỉnh theo không gian có sẵn. Khi overflow: clip được đặt trên cùng một trục, kích thước tối thiểu mặc định sẽ bắt đầu có hiệu lực, có thể khiến vùng chứa linh hoạt hoặc vùng chứa lưới tăng kích thước.

Phát hiện đối tượng

Để phát hiện khả năng hỗ trợ cho các vùng chứa cuộn một trục, hãy truy vấn quy tắc @supports named-feature() bằng cách sử dụng từ khoá single-axis-scroll-container.

@supports named-feature(single-axis-scroll-container) {
  /* Feature is supported */
}

Như đã thảo luận trong vấn đề CSSWG #13677, việc sử dụng named-feature(single-axis-scroll-container) là cách tiêu chuẩn được đề xuất để phát hiện khả năng này, vì chỉ kiểm tra bằng @supports (overflow: scroll clip) là chỉ kiểm tra cú pháp, không phát hiện được liệu trình duyệt có xử lý đúng các hành vi cuộn một trục đã sửa đổi hay không.

Trong JavaScript, hãy sử dụng CSS.supports("named-feature(single-axis-scroll-container)") để thực hiện bước kiểm tra này.

Rất mong nhận được ý kiến phản hồi của bạn

Để đánh giá các rủi ro tiềm ẩn về khả năng tương thích, chúng tôi đã tiến hành kiểm thử trên 190 trang web. Dựa trên phân tích này, những thay đổi này dường như không gây ra bất kỳ lỗi nào đáng kể.

Tuy nhiên, vì vùng chứa cuộn một trục thay đổi cơ bản cách đánh giá bối cảnh cuộn, nên một mạng lưới rộng hơn đang được thiết lập. Bạn được yêu cầu kiểm thử các trang web và ứng dụng web trên các kênh Chrome không ổn định để giúp xác định mọi trường hợp đặc biệt trước khi tính năng này được triển khai cho phiên bản ổn định.

Nếu mọi thứ bắt đầu gặp vấn đề hoặc nếu bạn gặp phải hành vi cuộn không mong muốn, vui lòng báo cáo lỗi Chromium.