Tùy chỉnh thanh cuộn trình duyệt đang trở nên phổ biến, và bạn có thể gặp những trang web có thanh cuộn độc đáo. Custom một thanh cuộn trong trang web của bạn có thể tạo sự ấn tượng về thiết kế của trang web bạn đối với người xem. Các bạn có thể dễ dàng tùy chỉnh thanh cuộn scrollbar với code CSS mà mình giới thiệu dưới đây. Bạn cũng có thể xem và tham khảo trong codepen:
-webkit-scrollbar bao gồm 7 phần tử khác nhau và cùng bao gồm một phần tử giao diện thanh cuộn đầy đủ:
Đầu tiên chúng ta tạo file HTML Document (index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Customize the Browser's Scrollbar with CSS</title>
<link type="text/css" rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
</body>
</html>
Bạn cần include file styles.css vào file HTML.
CSS Stylesheet (style.css) Đầu tiên chúng ta đặt width, height, background-color cho class .scrollbar , sau đó đặt overflow-y: scroll để có được thanh cuộn dọc. chúng ta đặt min-height: 450px cho div .force-overflow để thanh cuộn xuất hiện (bởi vì chúng ta sử dụng thuộc tính overflow-y để cuộn trong class .scrollbar).
.scrollbar {
background-color: #F5F5F5;
float: left;
height: 300px;
margin-bottom: 25px;
margin-left: 22px;
margin-top: 40px;
width: 65px;
overflow-y: scroll;
}
.force-overflow {
min-height: 450px;
}
Bây giờ, chúng ta sử dụng scrollbar pseudo-element để tùy chỉnh scrollbar của chúng ta. Thay thế chiều rộng mặc định của nó bằng 6px sau đó thêm màu nền background-color: #F5F5F5.
#style-1::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
Chúng ta biết rằng scrollbar chứa track, button và thumb, bây giờ chúng ta sẽ style cho thumb. Ta dùng pseudo-element (ví dụ: ::-webkit-scrollbar-thumb) với webkit prefix và đặt màu nền scrollbar-thumb background- color.
#style-1::-webkit-scrollbar-thumb {
background-color: #000000;
}
Sau đó, thanh cuộn sẽ như thế này:
Chúng ta dùng box-shadow trên scrollbar-track để tạo phong cách và thêm sự tương phản giữa scrollbar và scrollbar-track.
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
Unpublished comment
Viết câu trả lời