Giới thiệu
Thanh cuộn (scrollbar) là gì?
Có bao giờ các bạn đã chán với thanh cuộn mặc định trong trang web của mình chưa? Bạn đã bắt gặp những trang web có thanh cuộn đẹp đẽ, gọn gàng, độc đáo!
Vì thế với mong muốn tìm hiểu và giúp đỡ các bạn cách đổi màu thanh cuộn (scrollbar) – CSS Custom Scrollbar theo ý muốn, trong bài viết ngắn này, chúng ta sẽ cùng sử dụng CSS3 để tạo ra một thanh cuộn đơn giản và thú vị!!!
Để duy trì blog ngoài link rút gọn & mình có làm aff cho 1 số bên hosting.
Các nhà cung cấp uy tín về mặt chất lượng & đội ngũ support nên mọi người cứ yên tâm.
Nếu bạn đang có ý định mua Hosting, VPS mình có list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều
- Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
- Tino: Business Hosting, NVMe Hosting và NVMe VPS
- iNet: Cloud VPS và Web Hosting
Có thể tham khảo thêm:
Hướng dẫn đổi màu thanh cuộn
Thay màu scrollbar ở blogger/blogspot
- Bước 1: Đăng nhập vào Blogger
- Bước 2: Chọn Chủ đề -> Click mũi tên (kế bên Tuỳ Chỉnh) -> Chỉnh sửa HTML
- Bước 3: Nhấn tổ hợp Ctrl + F để tìm thẻ ]]></b:skin>
- Bước 4: Copy đoạn CSS bên dưới & dán vào ngay trên thẻ vừa tìm được.
::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 0 #ffffff;background:#fff;border:0 solid #000}::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 0 #ffffff;background:#0093da;border-radius:4px 4px 4px 4px; }Thay màu scrollbar ở website mã nguồn khác
Copy & dán đoạn CSS bên dưới vào
/* Thay đổi kích thước và kiểu thanh cuộn */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* Thiết lập màu nền cho thanh cuộn */
::-webkit-scrollbar-track {
background: #fff;
border: 0 solid #000;
}
/* Thiết lập màu cho nút trượt (thumb) */
::-webkit-scrollbar-thumb {
background: #0093da;
border-radius: 4px;
}
#0093da trong đoạn CSS là mã màu, các bạn có thể thay đổi và chọn mã màu mình thích
Link tìm mã màu CSS: Tại đây
CHÚC CÁC BẠN THÀNH CÔNG !!!
