Tùy chỉnh thanh Scrollbar trong trình duyệt bằng CSS

Đã bao giờ bạn cảm thấy nhàm chán đối với thanh cuộn mặc định trong trang web của mình? Bạn cảm thấy thích thú khi gặp những trang web có thanh cuộn đẹp đẽ, gọn gàng, độc đáo! Với mong muốn tìm hiểu và giúp đỡ các bạn tùy chỉnh lại thanh Scrollbar theo ý muốn, trong bài viết ngắn này, chúng ta sẽ cùng sử dụng CSS để tạo ra một thanh cuộn đơn giản và thú vị!!!
Lưu ý kỹ thuật này chỉ phát huy tác dụng trong trình duyệt Chrome hoặc Safari

Thuật ngữ cơ bản

Trước hết, chúng ta sẽ cùng tìm hiểu một vài thuật ngữ cơ bản để tùy chỉnh thanh cuộn trong CSS:
1. ::-webkit-scrollbar hình nền của chính thanh cuộn đó.
2. ::-webkit-scrollbar-button các nút định hướng trên thanh cuộn.
3. ::-webkit-scrollbar-track không gian trống bên dưới thanh tiến trình.
4. ::-webkit-scrollbar-track-piece phần trên cùng của thanh tiến trình không bị che bởi ảnh thumb.
5. ::-webkit-scrollbar-thumb phần tử cuộn có thể kéo để thay đổi kích cỡ.
6. ::-webkit-scrollbar-corner góc dưới cùng của phần tử cuộn, nơi hai thanh cuộn gặp nhau.
7. ::-webkit-resizer chỉnh sửa lại kích thước có thể kéo được xuất hiện phía trên thanh cuộn ở góc dưới cùng của một số phần tử.
Các bạn có thể hiểu đơn giản hơn thông qua các hình ảnh bên dưới

Tùy chỉnh thanh cuộn

Trước hết ta cần tạo một file HTML đơn giản

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Tùy chỉnh thanh cuộn với CSS</title>
        <link type="text/css" rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="scrollbar" id="my-style">
            <div class="force-overflow"></div>
        </div> 
    </body>
</html>

Tiếp đến chúng ta tạo ra file CSS và nhúng file này vào HTML, đồng thời đặt cho nó một số thuộc tính cơ bản. Chúng ta để “overflow-y: scroll” và “min-height: 450px” cho class force-overflow mục đích làm xuất hiện thanh cuộn dọc.

.scrollbar {
	margin-left: 22px;
	float: left;
	height: 300px;
	width: 65px;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
}

.force-overflow {
	min-height: 450px;
}

Thanh cuộn mặc định sẽ trông như thế này

Bây giờ chúng ta sẽ tùy chính thanh cuộn theo ý muốn của mình bằng cách sử dụng scrollbar pseudo-element. Ta thử đặt các thông số như bên dưới

#my-style::-webkit-scrollbar {
    width: 50px;
    background-color: black;
} 
#my-style::-webkit-scrollbar-thumb {
	border-radius: 50px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: red;
}

#my-style::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 50px;
	background-color: blue;
}

Và đây là kết quả thu được, ở đây để cho dễ nhìn chúng ta đặt width bằng 50px và đặt các background-color khác nhau cho các phần scrollbar, scrollbar-thumb, scrollbar-track. Các bạn có thể tùy ý đặt các thuộc tính khác nhau để tinh chỉnh thanh cuộn đúng theo mong muốn của các bạn

Đây là một số thanh cuộn tùy chỉnh khác, các bạn có thể tham khảo thêm tại đây

Tổng kết

Trong bài viết này, chúng ta đã cùng nhau sử dụng CSS để tùy chỉnh thanh cuộn theo ý muốn của mình. Tuy nhiên cách này có nhược điểm là chỉ có tác dụng trên trình duyệt chrome hoặc safari. Ngoài ra cũng có một số thư viện giúp tùy biến thanh cuộn các bạn có thể tìm hiểu thêm như JScrollPanel, song dùng CSS có lẽ là cách đơn giản nhất. Hy vọng bài viết sẽ giúp ích cho các bạn, hẹn gặp lại vào tuần sau.

Tham khảo:
https://scotch.io/tutorials/customize-the-browsers-scrollbar-with-css
https://css-tricks.com/custom-scrollbars-in-webkit/

Trả lời

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 *