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 */
}0
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 */
}3
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 */
}4 và body {
scrollbar-width: thin; /* "auto" or "thin" */
scrollbar-color: blue orange; /* scroll thumb and track */
}5
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 */
}6 để kiểm soát màu của thanh cuộn. Tuy nhiên, hiện tại không có hỗ trợ sửa đổi phần đệm và độ tròn cho “ngón tay cái theo dõi”
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 */
}6 và body {
scrollbar-width: thin; /* "auto" or "thin" */
scrollbar-color: blue orange; /* scroll thumb and track */
}8
Đây là một ví dụ sử dụng body {
scrollbar-width: thin; /* "auto" or "thin" */
scrollbar-color: blue orange; /* scroll thumb and track */
}4, body {
scrollbar-width: thin; /* "auto" or "thin" */
scrollbar-color: blue orange; /* scroll thumb and track */
}5, ::-webkit-scrollbar, ::-webkit-scrollbar-track, body {
scrollbar-width: thin; /* "auto" or "thin" */
scrollbar-color: blue orange; /* scroll thumb and track */
}3
* {
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 */
}6. Trình duyệt Firefox 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 */
}8. Sau khi các trình duyệt Blink và WebKit ngừng sử dụng hoàn toàn thông số kỹ thuật của body {
scrollbar-width: thin; /* "auto" or "thin" */
scrollbar-color: blue orange; /* scroll thumb and track */
}6, chúng sẽ quay trở lại thông số kỹ thuật mới của body {
scrollbar-width: thin; /* "auto" or "thin" */
scrollbar-color: blue orange; /* scroll thumb and track */
}8 một cách duyên dáng
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