Định kiểu thanh cuộn

Sử dụng các thuộc tính scrollbar-width và scrollbar-color để tạo kiểu cho thanh cuộn.

Bramus

Giới thiệu

Từ Chrome phiên bản 2, bạn có thể tạo kiểu cho thanh cuộn bằng các phần tử giả ::-webkit-scrollbar-*. Cách tiếp cận này hoạt động tốt trong Chrome và Safari, nhưng chưa bao giờ được Nhóm công tác CSS chuẩn hoá.

Những gì được chuẩn hoá là các thuộc tính scrollbar-width và scrollbar-color, thuộc Quy cách mô-đun tạo kiểu cho thanh cuộn CSS cấp 1. Kể từ Chrome 121, các thuộc tính này sẽ được hỗ trợ.

Browser Support

Source

Hướng dẫn cơ bản về thanh cuộn

Cấu trúc của thanh cuộn

Thanh cuộn tối thiểu bao gồm một track và một thumb. Đường trượt là khu vực mà ngón tay cái có thể di chuyển. Đường theo dõi biểu thị toàn bộ khoảng cách cuộn. Ngón tay cái đại diện cho vị trí hiện tại trong vùng có thể cuộn. Khi bạn cuộn, thanh này sẽ di chuyển trong đường đua. Thường thì bạn cũng có thể kéo ngón tay cái.

Tuy nhiên, thanh cuộn có thể có nhiều phần hơn chỉ là ngón tay cái và đường dẫn. Ví dụ: một thanh cuộn có thể có một hoặc nhiều nút để tăng hoặc giảm độ lệch cuộn. Các phần tạo nên một thanh cuộn được xác định bởi hệ điều hành cơ bản.

Hình minh hoạ các thành phần tạo nên một thanh cuộn. Hình minh hoạ ở bên trái là một thanh cuộn tối thiểu chỉ có một track và thumb. Ảnh bên phải cũng có các nút.

Thanh cuộn thông thường và thanh cuộn lớp phủ

Trước khi xem cách tạo kiểu cho thanh cuộn, bạn cần hiểu rõ sự khác biệt giữa 2 loại thanh cuộn.

Thanh cuộn lớp phủ

Thanh cuộn lớp phủ là những thanh cuộn nổi được hiển thị ở trên cùng của nội dung bên dưới. Theo mặc định, các chỉ báo này không xuất hiện mà chỉ xuất hiện khi bạn đang cuộn. Để giữ cho nội dung bên dưới hiển thị, các lớp phủ này thường có độ trong suốt một phần, nhưng điều đó tuỳ thuộc vào quyết định của hệ điều hành. Kích thước của các nút này cũng có thể thay đổi khi bạn tương tác với chúng.

Thanh cuộn cổ điển

Thanh cuộn cổ điển là thanh cuộn được đặt trong một rãnh thanh cuộn chuyên dụng. Rãnh thanh cuộn là khoảng trống giữa cạnh đường viền bên trong và cạnh khoảng đệm bên ngoài. Các thanh cuộn này thường có màu đục (không trong suốt) và chiếm một phần không gian của nội dung liền kề.

Các thuộc tính `scrollbar-color` và `scrollbar-width`

Cách tạo màu cho thanh cuộn bằng `scrollbar-color`

Thuộc tính scrollbar-color cho phép bạn thay đổi bảng phối màu của thanh cuộn. Thuộc tính này chấp nhận 2 giá trị <color>. Giá trị <color> đầu tiên xác định màu của ngón tay cái và giá trị thứ hai xác định màu dùng cho đường đánh dấu.

.scroller {
  scrollbar-color: hotpink blue;
}

Khi sử dụng một thanh cuộn lớp phủ, màu của rãnh sẽ không có hiệu ứng theo mặc định. Tuy nhiên, khi bạn di chuột lên thanh cuộn, đường cuộn sẽ xuất hiện.

Bản minh hoạ: Tạo kiểu cho thanh cuộn: scrollbar-color

Để sử dụng chế độ kết xuất mặc định do hệ điều hành cung cấp, hãy dùng auto làm giá trị.

Thay đổi kích thước của thanh cuộn bằng `scrollbar-width`

Thuộc tính scrollbar-width cho phép bạn chọn một thanh cuộn hẹp hơn, hoặc thậm chí ẩn hoàn toàn thanh cuộn mà không ảnh hưởng đến khả năng cuộn.

Các giá trị được chấp nhận là auto, thin và none.

auto: Chiều rộng mặc định của thanh cuộn do nền tảng cung cấp.
thin: Một biến thể mỏng của thanh cuộn do nền tảng cung cấp hoặc một thanh cuộn tuỳ chỉnh mỏng hơn thanh cuộn mặc định của nền tảng.
none: Ẩn thanh cuộn một cách hiệu quả. Tuy nhiên, phần tử này vẫn có thể cuộn.

Bạn không thể dùng <length> như 16px làm giá trị cho scrollbar-width.

.scroller {
  scrollbar-width: thin;
}

Khi sử dụng thanh cuộn lớp phủ, ngón tay cái chỉ được vẽ khi bạn đang tích cực cuộn vùng có thể cuộn.

Bản minh hoạ: Tạo kiểu cho thanh cuộn: scrollbar-width

Hỗ trợ các phiên bản trình duyệt cũ

Để đáp ứng các phiên bản trình duyệt không hỗ trợ scrollbar-color và scrollbar-width, bạn có thể sử dụng cả thuộc tính scrollbar-* và ::-webkit-scrollbar-* mới.

.scroller {
    --scrollbar-color-thumb: hotpink;
    --scrollbar-color-track: blue;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

Ví dụ minh hoạ: Tạo kiểu cho thanh cuộn bằng cách sử dụng scrollbar-* với một phương án dự phòng là ::-webkit-scrollbar-*

Xin lưu ý rằng khi bạn đặt width hoặc height của ::-webkit-scrollbar, thanh cuộn lớp phủ sẽ luôn xuất hiện, biến thanh cuộn này thành thanh cuộn cổ điển.

Để duy trì hiệu ứng này, bạn có thể chọn chỉ thay đổi màu khi di chuột lên thanh cuộn.

.scroller::-webkit-scrollbar-thumb {
    background: transparent;
}
.scroller::-webkit-scrollbar-track {
    background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
}

.scroller:hover {
    --fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}

Bản minh hoạ: Tạo kiểu cho thanh cuộn bằng scrollbar-* với chế độ dự phòng là ::-webkit-scrollbar-*, chỉ áp dụng màu ::-webkit-scrollbar-* khi di chuột

Định kiểu thanh cuộn Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.