Bạn có thể định kiểu CSS cho thanh cuộn không?

Sau khi đọc bài viết này, bạn có thể hiểu mọi thứ về tùy chỉnh và tạo kiểu thanh cuộn bằng CSS

Ưu và nhược điểm của Thanh cuộn tùy chỉnh

Trước khi bắt tay vào viết mã, tôi nghĩ bạn nên xem xét một số sự cân bằng tiềm năng đi kèm với việc tạo thanh cuộn tùy chỉnh cho trang web hoặc ứng dụng của bạn

Ưu điểm là nó có thể giúp trang web của bạn nổi bật so với hàng triệu trang web sử dụng thanh cuộn mặc định của trình duyệt. Bất cứ điều gì có thể làm cho trang web của bạn đáng nhớ hơn một chút đối với khách truy cập sẽ mang lại lợi ích lâu dài cho bạn

Mặt khác, nhiều nhà thiết kế giao diện người dùng tin rằng bạn không bao giờ nên can thiệp vào các thành phần giao diện người dùng “chuẩn hóa” như thanh cuộn. Nếu bạn sửa đổi thanh cuộn quá nhiều, điều này có thể gây nhầm lẫn cho những người đang sử dụng trang web hoặc ứng dụng của bạn

Nếu bạn đang làm điều này cho trang web cá nhân của riêng mình, có lẽ bạn không cần phải lo lắng về nó miễn là bạn thích giao diện của nó.

Mặt khác, nếu bạn đang nghĩ đến việc triển khai thanh cuộn tùy chỉnh tại nơi làm việc hoặc dự án nào đó mà bạn muốn kiếm tiền, bạn nên thử thử nghiệm A/B và đưa ra quyết định dựa trên dữ liệu dựa trên kết quả

Vào cuối ngày, hầu hết chúng ta đang viết mã để tăng doanh thu cho doanh nghiệp, vì vậy bạn luôn cần ghi nhớ điều đó

Vào tháng 9 năm 2018, W3C CSS Scrollbars đã xác định các thông số kỹ thuật để tùy chỉnh giao diện của thanh cuộn bằng CSS

Kể từ năm 2020, đang chạy các trình duyệt hỗ trợ kiểu thanh cuộn CSS. Tuy nhiên, bạn sẽ cần viết hai bộ quy tắc CSS để bao gồm Blink và WebKit cũng như trình duyệt Firefox

Trong hướng dẫn này, bạn sẽ học cách sử dụng CSS để tùy chỉnh thanh cuộn để hỗ trợ các trình duyệt hiện đại

điều kiện tiên quyết

Trước khi theo dõi bài viết này, bạn sẽ cần

• Làm quen với các khái niệm về tiền tố của nhà cung cấp, phần tử giả và sự xuống cấp duyên dáng

“Tiền tố nhà cung cấp” là một cách để trình duyệt của bạn hỗ trợ các tính năng CSS mới trước khi chúng được hỗ trợ đầy đủ trong tất cả các trình duyệt

“Suy giảm duyên dáng” là một chiến lược xử lý thiết kế trang web cho nhiều loại trình duyệt khác nhau, cả cũ và mới.

“Các phần tử giả” là các từ khóa được thêm vào bộ chọn cho phép bạn tạo kiểu cho một phần cụ thể của (các) phần tử được chọn. Và dưới đây là một số “phần tử giả” bạn nên dùng cho Chrome, Safari

• ::-webkit-scrollbar. nền của chính thanh
• ::-webkit-scrollbar-button. các nút định hướng trên thanh cuộn
• ::-webkit-scrollbar-track. khoảng trống “bên dưới” thanh tiến trình
• ::-webkit-scrollbar-track-piece. lớp trên cùng của thanh tiến trình không bị ngón tay cái che phủ
• ::-webkit-scrollbar-thumb. phần tử cuộn có thể kéo thay đổi kích thước tùy thuộc vào kích thước của phần tử có thể cuộn
• ::-webkit-scrollbar-corner. góc dưới cùng của phần tử có thể cuộn, nơi hai thanh cuộn gặp nhau
• ::-webkit-resizer. núm điều khiển thay đổi kích thước có thể kéo xuất hiện phía trên góc thanh cuộn ở góc dưới cùng của một số thành phần

Tạo kiểu thanh cuộn trong Chrome, Edge và Safari

Hiện tại, thanh cuộn tạo kiểu cho Chrome, Edge và Safari có sẵn với phần tử giả tiền tố nhà cung cấp

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

Dưới đây là một ví dụ sử dụng các phần tử giả ::-webkit-scrollbar, ::-webkit-scrollbar-track và

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

Đây là ảnh chụp màn hình của thanh cuộn được tạo bằng các quy tắc CSS này

Mã này hoạt động trong các bản phát hành mới nhất của Chrome, Edge và Safari

Thật không may, thông số kỹ thuật này đã bị W3C chính thức loại bỏ và có thể sẽ bị khấu hao theo thời gian

Tạo kiểu thanh cuộn trong Firefox

Hiện tại, thanh cuộn tạo kiểu cho Firefox có sẵn với CSS Scrollbars mới

Dưới đây là một ví dụ sử dụng các thuộc tính

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

Đây là ảnh chụp màn hình của thanh cuộn được tạo bằng các quy tắc CSS này

Thông số kỹ thuật này chia sẻ một số điểm tương đồng với thông số kỹ thuật

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

Xây dựng các kiểu thanh cuộn tương lai

Bạn có thể viết CSS của mình theo cách hỗ trợ cả thông số kỹ thuật của

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

Đây là một ví dụ sử dụng

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}*::-webkit-scrollbar-track {
  background: orange;
}*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Các trình duyệt Blink và WebKit sẽ bỏ qua các quy tắc mà chúng không nhận ra và áp dụng các quy tắc

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

Phần kết luận

Trong bài viết này, bạn đã được giới thiệu cách sử dụng CSS để tạo kiểu cho thanh cuộn và cách đảm bảo các kiểu này được nhận dạng trong hầu hết các trình duyệt hiện đại

Cũng có thể mô phỏng thanh cuộn bằng cách ẩn thanh cuộn mặc định và sử dụng JavaScript để phát hiện chiều cao và vị trí cuộn. Tuy nhiên, những cách tiếp cận này gặp hạn chế với việc tái tạo trải nghiệm như cuộn theo quán tính (e. g. , giảm dần chuyển động khi cuộn qua bàn di chuột)

Nếu bạn muốn tìm hiểu thêm về CSS, hãy xem các liên kết bên dưới để biết các bài tập và dự án lập trình

Bạn có thể tạo kiểu CSS cho thanh cuộn không?

Làm cách nào để thay đổi kiểu thanh cuộn của trình duyệt trong CSS?

Chúng ta có thể thay đổi màu của thanh cuộn trong CSS không?

Làm cách nào để thay đổi kiểu thanh cuộn iframe trong CSS?