Đị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 phần tử giả ::-webkit-scrollbar-*. Phương pháp 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 hóa.

Những gì được chuẩn hoá là các thuộc tính scrollbar-width và scrollbar-color, một phần của Thông số kỹ thuật cấp 1 cho mô-đun tạo kiểu thanh cuộn CSS. Các thuộc tính này được hỗ trợ kể từ Chrome 121.

Thanh cuộn 101

Phân tích thành phần của thanh cuộn

Ở mức tối thiểu, một thanh cuộn bao gồm một bản nhạc và một nút thumb. Kênh là vùng mà ngón tay cái có thể di chuyển. Đường đi biểu thị toàn bộ khoảng cách cuộn. Thumb tượng trưng cho vị trí hiện tại trong khu vực có thể cuộn. Khi bạn cuộn, nút này sẽ di chuyển trong kênh. Nút thumb cũng thường kéo được.

Tuy nhiên, thanh cuộn có thể có nhiều phần hơn là chỉ thumb và track. 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 thanh cuộn là do hệ điều hành cơ bản xác định.

Thanh cuộn kiểu cũ và lớp phủ

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

Thanh cuộn lớp phủ

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

Thanh cuộn cổ điển

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

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

Cung cấp 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 hai giá trị <color>. Giá trị <color> đầu tiên xác định màu của nút thumb và giá trị thứ hai sẽ là màu dùng cho bản nhạc.

.scroller {
  scrollbar-color: hotpink blue;
}

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

Để 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 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í là ẩ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 của thanh cuộn mặc định 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 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 được.

Bạn không thể sử dụng <length>, chẳng hạn 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 cái chỉ được vẽ trong khi bạn đang chủ động cuộn khu vực có thể cuộn.

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

Để phục vụ cho 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);
    }
}

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 hiển thị, biến thanh này thành thanh cuộn cũ một cách hiệu quả.

Để ảo ảnh, bạn có thể chọn chỉ thay đổi màu sắc 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. */
}