Hướng Dẫn Tùy Biến Scrollbar Cực Đẹp Dành Cho Người Mới
Bài viết được sự cho phép của tác giả Trần Anh Tuấn
Ở bài viết này mình sẽ hướng dẫn cho các bạn cách tùy biến scrollbar cực đẹp cho trang web giống như trang web của mình mà các bạn đang lướt vậy với chỉ một vài dòng CSS cực đơn giản là các bạn có thể làm được rồi. Bắt đầu luôn thôi nào
Scrollbar nó chia ra làm 3 thành phần đó chính là scrollbar, scrollbar thumb và scrollbar track.
Scrollbar
Đây là phần chính, thường phần này người ta sẽ tùy biến độ rộng của nó, ví dụ width: 10px
chẳng hạn
body::-webkit-scrollbar{
width: 10px; }
Scrollbar track
Đây là phần bên dưới của scrollbar, là phần hiển thị bên trong scrollbar và chứa scrollbar thumb, ở đây mình có thể cho nó background-color: #fafafa
để nó trắng mờ như sau
body::-webkit-scrollbar-track{
background-color: #fafafa; }
Scrollbar thumb
Đây là phần chính, đấy chính là cái mà các bạn thường nhấn chuột vào để kéo đó, các bạn có thể tùy biến nó với màu nền hoặc bo góc cũng được, chơi cả gradient như blog mình cũng được như thế này
body::-webkit-scrollbar-thumb{
background-image: linear-gradient(-45deg, #6a5af9, #d66efd); border-radius: 50px; }
Như vậy là mình đã chỉ xong cho các bạn cách tùy biến scrollbar cho trang web rồi nhé, tuy nhiên cái này không hỗ trợ trên trình duyệt Firefox. Vì thế khi chúng ta áp dụng những đoạn code CSS này vào thì trình duyệt Firefox nó vẫn là mặc định thôi. Nếu các bạn bị buộc phải làm thì có thể tìm hiểu các thư viện tùy biến scrollbar thử nhé. Good luck!
Bài viết gốc được đăng tải tại evondev.com
Xem thêm:
- Thành thạo kỹ năng CSS của bạn với bộ code cực chất
- Cách Trình Duyệt Hiển Thị Website Của Bạn
- IT Manager Là Gì? Những Điều Bạn Cần Biết Về IT Manager
Đừng bỏ lỡ Top việc làm IT hấp dẫn trên TopDev
- T Test case là gì? Cách viết Test case hiệu quả
- C Clean Architecture – Điều đơn giản với ý tưởng củ hành
- R RxJava – Thời đại lập trình Reactive programming ứng dụng Android đã tới
- T Tại sao thiết kế phần mềm càng đa dụng lại càng phức tạp?
- C Caching là gì? Tổng quan về caching của một ứng dụng
- A AWS là gì? Mọi thứ bạn cần biết về AWS trong 5 phút
- N Nhập môn về các mô hình ngôn ngữ lớn (LLMs)
- L Laravel là gì? Những ứng dụng của Laravel phổ biến nhất
- W WordPress là gì? Tìm hiểu từ A – Z CMS phổ biến nhất thế giới
- T Test plan là gì? 4 bước cần thiết để thực hiện test plan?