Định kiểu thanh cuộn

Dùng thuộc tính scrollbar-width và scrollbar-color để tạo kiểu cho thanh cuộn.

Bramus

Giới thiệu

Trên 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 có hiệu quả trong Chrome và Safari, nhưng chưa bao giờ được Nhóm hoạt động CSS chuẩn hoá.

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 của mô-đun tạo kiểu cho 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 thu nhỏ. Đường ray là phần mà ngón cái có thể di chuyển. Đường đi biểu thị toàn bộ khoảng cách cuộn. Ngón cái biểu thị 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 bên trong tuyến đường. Ngón cái cũng thường kéo được.

Tuy nhiên, thanh cuộn có thể có nhiều phần ngoài phần 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, điều quan trọng là bạn cần hiểu rõ sự khác biệt giữa hai loại thanh cuộn.

Thanh cuộn của lớp phủ

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

Thanh cuộn kiểu cũ

Thanh cuộn kiểu cũ là các thanh cuộn được đặt trong một gutter thanh cuộn chuyên dụng. Máng xối của thanh cuộn là khoảng cách giữa cạnh đường viền trong và cạnh đệm ngoài. Những thanh cuộn này thường mờ đục (không trong suốt) và chiếm một phần không gian của nội dung liền kề.

Thuộc tính scrollbar-color và scrollbar-width

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

.scroller {
  scrollbar-color: hotpink blue;
}

Khi sử dụng thanh cuộn của lớp phủ, màu của bản nhạc sẽ không có hiệu lực theo mặc định. Tuy nhiên, khi di chuột lên thanh cuộn, bản âm thanh đó 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 của thanh cuộn bằng scrollbar-width

Thuộc tính scrollbar-width cho phép bạn chọn 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.

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 thanh cuộn tuỳ chỉnh mỏng hơn thanh cuộn của nền tảng mặc định.
• none: Ẩn hiệu quả thanh cuộn. Tuy nhiên, phần tử này vẫn có thể cuộn được.

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

.scroller {
  scrollbar-width: thin;
}

Khi sử dụng thanh cuộn của lớp phủ, ngón cái chỉ được vẽ 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 những 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 ý khi bạn đặt width hoặc height của ::-webkit-scrollbar, thanh cuộn lớp phủ sẽ luôn hiển thị, chuyển hiệu quả thành thanh cuộn cổ điển.

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