Giới thiệu
Màu nền: Xanh lam;
Tính đến năm 2020, 96% người dùng Internet đang chạy các trình duyệt hỗ trợ kiểu dáng CSS ScrollBar. Tuy nhiên, bạn sẽ cần phải viết hai bộ quy tắc CSS để bao gồm Blink và Webkit và cũng là trình duyệt Firefox.
Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng CSS để tùy chỉnh các thanh cuộn để hỗ trợ các trình duyệt hiện đại.
Điều kiện tiên quyết
Để 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, các yếu tố giả và suy thoái duyên dáng.
Kiểu dáng thanh cuộn trong Chrome, Edge và Safari
Hiện tại, Kiểu thanh cuộn cho Chrome, EDGE và Safari có sẵn với Phần tử Pseudo Prefix của nhà cung cấp -webkit-ScrollBar . .-webkit-scrollbar.
Đây là một ví dụ sử dụng :: - Webkit-ScrollBar , :: WebKIT- Thanh cuộn , và :: Webkit-ScrollBar-Thumb Paseudo-Elements: ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::webkit-scrollbar-thumb pseudo-elements:
Body :: - Webkit-Scrollbar { Chiều rộng: 12px; / * Chiều rộng của toàn bộ thanh cuộn * / Không Body :: - Webkit-ScrollBar-track { Bối cảnh: Cam; / * Màu của khu vực theo dõi * / Không Body :: - Webkit-Scrollbar-Thumb { Màu nền: Xanh lam; / * màu của ngón tay cái cuộn * / Border-Radius: 20px; / * Vòng tròn của ngón tay cái cuộn * / Biên giới: 3px rắn màu cam; / * tạo phần đệm xung quanh Cuộn Thumb * / Không
Dưới đây là ảnh chụp màn hình của thanh cuộn được tạo ra với 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 đã được chính thức từ bỏ W3C và có thể sẽ bị phản đối theo thời gian.
Kiểu dáng thanh cuộn trong Firefox
Hiện tại, sklbars tạo kiểu cho Firefox có sẵn với các thanh CSS mới.
Dưới đây là một ví dụ sử dụng ScrollBar-Width và ScrollBar-Color < AI = 4> Thuộc tính: scrollbar-width and scrollbar-color properties:
cơ thể người { Thanh cuộn chiều rộng: mỏng; / * "Tự động" hoặc "mỏng" * / Thanh cuộn màu: màu xanh cam; / * Cuộn ngón tay cái và theo dõi * / Không
Dưới đây là ảnh chụp màn hình của thanh cuộn được tạo ra với 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. -webkit-Scrollbar Đặc tả kỹ thuật để điều khiển màu của thanh cuộn. Tuy nhiên, hiện tại sẽ không có hỗ trợ để sửa đổi phần đệm và độ tròn cho "ngón tay cái".
Thật không may, thông số kỹ thuật này đã được chính thức từ bỏ W3C và có thể sẽ bị phản đối theo thời gian.
Kiểu dáng thanh cuộn trong Firefox-webkit-scrollbar and CSS Scrollbars specifications.
Hiện tại, sklbars tạo kiểu cho Firefox có sẵn với các thanh CSS mới.scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb:
Dưới đây là một ví dụ sử dụng ScrollBar-Width và ScrollBar-Color < AI = 4> Thuộc tính: cơ thể người { Thanh cuộn chiều rộng: mỏng; / * "Tự động" hoặc "mỏng" * / Thanh cuộn màu: màu xanh cam; / * Cuộn ngón tay cái và theo dõi * / Không Đặc điểm kỹ thuật này chia sẻ một số điểm chung với -webkit-Scrollbar Đặc tả kỹ thuật để điều khiển màu của thanh cuộn. Tuy nhiên, hiện tại sẽ không có hỗ trợ để sửa đổi phần đệm và độ tròn cho "ngón tay cái". Xây dựng phong cách Scrollbar bằng chứng trong tương lai Bạn có thể viết CSS của mình theo cách hỗ trợ cả -webkit-ScrollBar và CSS Scrollbars Thông số kỹ thuật. Dưới đây là một ví dụ sử dụng ScrollBar-Width , ScrollBar-Color < AI = 4>, :: - Webkit-Scrollbar , :: - Webkit-ScrollBar-track , :: Webkit-ScrollBar-Thumb : / * Hoạt động trên Firefox * / * { Thanh cuộn chiều rộng: mỏng; Thanh cuộn màu: màu xanh cam; Không / * Hoạt động trên Chrome, Edge và Safari * / * :: - Webkit-Scrollbar { Chiều rộng: 12px; Không
* :: - webkit-scrollbar-track { -webkit-ScrollBar quy tắc. Trình duyệt Firefox sẽ bỏ qua các quy tắc mà họ không nhận ra và áp dụng CSS ScrollBars quy tắc. Sau khi các trình duyệt nhấp nháy và webkit chấp nhận đầy đủ -webkit-scrollbar specification, they will gracefully fall back to the new CSS Scrollbars specification.
Bối cảnh: Cam;
Không
Cũng có thể mô phỏng một 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, các cách tiếp cận này chạy vào những hạn chế với các trải nghiệm tái tạo như di chuyển quán tính [ví dụ:, chuyển động phân rã khi cuộn qua trackpad].
Nếu bạn muốn tìm hiểu thêm về CSS, hãy xem trang chủ đề CSS của chúng tôi cho các bài tập và các dự án lập trình.