CSS Scrollbar Tùy biến dễ dàng ai cũng làm được

Ở bài viết này mình sẽ hướng dẫn các bạn cách tùy biến scrollbar cực đẹp cho website của các bạn chỉ với vài dòng CSS đơn giản

CSS Tùy biến Scrollbar dễ dàng ai cũng làm được với hướng dẫn siêu dễ siêu tinh gọn từ RealDev

Ở 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 thumbscrollbar 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

Scrollbar track
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

Scrollbar thumb
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

4.8/5 - (6 Yêu thích)
Bạn đang xem: CSS Scrollbar Tùy biến dễ dàng ai cũng làm đượcTOP 3 CSS Border Gradient cực dễ làm Border-gradient-cssHTML toàn tập cho người mới | Phần 2 Html-co-ban-toan-tap-2HTML toàn tập cho người mới | Phần 3 Html-co-ban-toan-tap3
Trả lời

Click vào Comment nhanh ở dưới để chia sẻ suy nghĩ của Bạn.

Bài học thật sự hữu ích và cung cấp kiến thức giá trị.Tôi đã học được nhiều điều từ bài viết này.Chia sẻ kiến thức bổ ích, cảm ơn bạn.Cảm ơn bạn đã chia sẻ kinh nghiệm học tập này.Bài viết giúp tôi hiểu rõ hơn về chủ đề này.Giá trị của bài học thực sự đáng khen.Tôi đã học hỏi được nhiều từ bài viết của bạn.Cảm ơn bạn đã chia sẻ kiến thức quý báu này.Nội dung bài viết rất phù hợp với tình hình hiện tại.Tôi đánh giá cao sự cố gắng của bạn trong việc chia sẻ.Bài học rất hữu ích cho công việc của tôi.Cảm ơn bạn đã cung cấp kiến thức chất lượng này.Tôi đã học được điều mới mẻ từ bài viết của bạn.Bài học giúp tôi mở rộng kiến thức của mình.Cảm ơn bạn vì bài học thú vị này.

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đã Copy vào Bộ nhớ tạm