Tuỳ chỉnh màu sắc hoặc độ dày của thanh cuộn

Tính năng web: scrollbar-color scrollbar-width

Bạn có thể tuỳ chỉnh giao diện của thanh cuộn bằng các thuộc tính CSS chuẩn scrollbar-color và scrollbar-width.

  • scrollbar-color: Chấp nhận hai giá trị <color>. Màu đầu tiên áp dụng cho nút kéo (phần di chuyển) và màu thứ hai áp dụng cho rãnh (nền cố định).
  • scrollbar-width: Chấp nhận auto (mặc định), thin (biến thể mỏng hơn) hoặc none (ẩn hoàn toàn thanh cuộn trong khi vẫn duy trì khả năng cuộn).

Áp dụng scrollbar-color và scrollbar-width

BẮT BUỘC: Sử dụng scrollbar-color và scrollbar-width trên vùng chứa có thể cuộn.

Khi sử dụng scrollbar-color, hãy dùng các biến CSS để tách biệt màu của thanh trượt và rãnh, giúp dễ đọc và dễ bảo trì (đặc biệt là khi sử dụng phương án dự phòng).

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

Chiến lược dự phòng

Dự phòng và hỗ trợ trình duyệt cho scrollbar-color

Tính năng này là cải tiến tăng dần và không phải lúc nào cũng cần có tính năng dự phòng.

Nếu kiểu dáng là quan trọng và mục tiêu Baseline của người dùng là "Baseline Widely Available" (Baseline được cung cấp rộng rãi) trở lên, thì bạn NÊN thêm các phần tử giả ::-webkit-scrollbar không chuẩn làm phương án dự phòng.

Gói các phương án dự phòng cũ trong một khối @supports not (scrollbar-color: auto) để ngăn xung đột giữa các thuộc tính chuẩn và bộ chọn WebKit cũ trong các trình duyệt hỗ trợ cả hai thuộc tính này.

Nếu bạn đang sử dụng các thuộc tính tuỳ chỉnh để xác định màu, thì các thuộc tính này sẽ tự động xếp tầng cho các bộ chọn WebKit cũ. Bạn KHÔNG cần phải sao chép các mục này.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}