CSS - Cuộn: Hướng dẫn cho người mới bắt đầu

Xin chào các pháp sư thiết kế web tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của CSS cuộn. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn trong hành trình này, và khi kết thúc, bạn sẽ có thể thiết kế cuộn như một chuyên gia!

CSS - Scrollbars

Giới thiệu về Cuộn

Trước khi chúng ta đi vào chi tiết, hãy nói về cuộn là gì. Bạn đã thấy chúng mỗi ngày khi duyệt web - đó là những thanh nhỏ ở bên hoặc dưới trang web cho phép bạn cuộn lên, xuống, trái hoặc phải khi có nội dung nhiều hơn màn hình của bạn có thể hiển thị cùng một lúc.

Bây giờ, hãy tưởng tượng nếu bạn có thể挥动 một枝魔法杖 và thay đổi diện mạo của những thanh cuộn này. Đúng vậy, đó chính xác là điều chúng ta sẽ học hôm nay với CSS!

Làm thế nào để thiết kế Cuộn?

Thiết kế cuộn với CSS giống như cho trang web của bạn một cuộc đại变身. Đây là cách để trang web của bạn nổi bật và cung cấp một trải nghiệm người dùng độc đáo. Hãy bắt đầu với một ví dụ đơn giản:

/* Áp dụng cho toàn bộ phần thân của trang web của bạn */
body::-webkit-scrollbar {
width: 12px;               /* chiều rộng của toàn bộ thanh cuộn */
}

body::-webkit-scrollbar-track {
background: orange;        /* màu của khu vực theo dõi */
}

body::-webkit-scrollbar-thumb {
background-color: blue;    /* màu của nút cuộn */
border-radius: 20px;       /* sự tròn của nút cuộn */
border: 3px solid orange;  /* tạo padding xung quanh nút cuộn */
}

Trong ví dụ này, chúng ta đang nói với trình duyệt để:

Làm thanh cuộn rộng 12 pixel
Màu của khu vực theo dõi (khu vực nút di chuyển trên) là cam
Màu của nút (phần bạn grab để cuộn) là xanh lam
Đường viền tròn cho nút cuộn
Thêm đường viền cam xung quanh nút

Đẹp phải không? Nhưng đợi đã, còn nhiều hơn nữa!

Chọn phần tử Cuộn

Để thiết kế cuộn, chúng ta sử dụng các phần tử đặc biệt. Hãy nghĩ về chúng như những từ魔法 cho CSS biết phần tử nào của thanh cuộn cần thay đổi. Dưới đây là những phần tử chính:

Phần tử	Mô tả
::-webkit-scrollbar	Thiết kế toàn bộ thanh cuộn
::-webkit-scrollbar-button	Thiết kế các nút trên thanh cuộn (mũi tên chỉ lên và xuống)
::-webkit-scrollbar-track	Thiết kế khu vực theo dõi (thanh tiến trình) của thanh cuộn
::-webkit-scrollbar-track-piece	Thiết kế phần của khu vực theo dõi (thanh tiến trình) không được che bởi把手
::-webkit-scrollbar-thumb	Thiết kế phần có thể di chuyển của thanh cuộn
::-webkit-scrollbar-corner	Thiết kế góc dưới của thanh cuộn, nơi thanh cuộn ngang và dọc gặp nhau
::-webkit-resizer	Thiết kế把手 có thể di chuyển xuất hiện ở góc dưới của một số phần tử

Tạo Cuộn tùy chỉnh

Bây giờ chúng ta đã biết các từ魔法 (phần tử), hãy tạo một thanh cuộn vui nhộn, tùy chỉnh:

/* Hãy tạo một thanh cuộn neon! */
.neon-scroll::-webkit-scrollbar {
width: 16px;
}

.neon-scroll::-webkit-scrollbar-track {
background: #000000;
box-shadow: inset 0 0 5px grey;
}

.neon-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(#00ff00, #ff00ff);
border-radius: 10px;
}

.neon-scroll::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#ff00ff, #00ff00);
}

Trong ví dụ này, chúng ta đã tạo một thanh cuộn trông như thể thuộc về một bộ phim cyberpunk! Khu vực theo dõi là đen với một bóng trong suốt, và nút có một gradient thay đổi khi bạn rê chuột vào nó. Áp dụng lớp này cho bất kỳ phần tử nào có overflow, và xem phép màu xảy ra!

Thiết kế CSS Cuộn

Hãy chia quá trình thiết kế thanh cuộn thành các bước:

Chọn mục tiêu: Quyết định nếu bạn muốn thiết kế thanh cuộn cho toàn bộ trang (sử dụng body) hoặc chỉ một phần tử cụ thể (sử dụng lớp hoặc ID).
Đặt chiều rộng: Sử dụng phần tử ::-webkit-scrollbar để đặt chiều rộng tổng thể của thanh cuộn.
Thiết kế khu vực theo dõi: Sử dụng ::-webkit-scrollbar-track để đặt nền, thêm bóng hoặc các phong cách khác cho khu vực theo dõi.
Thiết kế nút: Sử dụng ::-webkit-scrollbar-thumb để thiết kế phần có thể di chuyển của thanh cuộn. Đây là nơi bạn có thể sáng tạo với màu sắc, gradient và hình dạng.
Thêm tương tác: Sử dụng các伪类 như :hover hoặc :active để thay đổi giao diện của thanh cuộn khi người dùng tương tác với nó.

Dưới đây là một ví dụ kết hợp tất cả:

.cool-scroll {
height: 300px;
overflow-y: scroll;
}

.cool-scroll::-webkit-scrollbar {
width: 14px;
}

.cool-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.cool-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}

Điều này tạo ra một thanh cuộn hiện đại, mượt mà cho bất kỳ phần tử nào có lớp cool-scroll. Thanh cuộn rộng hơn mặc định, có viền tròn và tối hơn khi rê chuột vào.

Thuộc tính liên quan đến CSS Cuộn

Trong khi chúng ta đã tập trung vào các trình duyệt WebKit (như Chrome và Safari), có một số thuộc tính tiêu chuẩn CSS hoạt động trên nhiều trình duyệt khác nhau. Dưới đây là bảng các thuộc tính này:

Thuộc tính	Mô tả
scrollbar-width	Đặt chiều rộng của thanh cuộn (chỉ cho Firefox)
scrollbar-color	Đặt màu của thanh cuộn (chỉ cho Firefox)
overflow	Xác định điều gì sẽ xảy ra nếu nội dung tràn ra ngoài hộp của phần tử
overflow-x	Xác định điều gì sẽ xảy ra với các cạnh trái/phải của nội dung nếu nó tràn ra ngoài khu vực nội dung của phần tử
overflow-y	Xác định điều gì sẽ xảy ra với các cạnh trên/dưới của nội dung nếu nó tràn ra ngoài khu vực nội dung của phần tử

Dưới đây là cách bạn có thể sử dụng chúng:

/* Cho Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}

/* Cho các trình duyệt khác */
*::-webkit-scrollbar {
width: 12px;
}

*::-webkit-scrollbar-track {
background: #f1f1f1;
}

*::-webkit-scrollbar-thumb {
background-color: #888;
}

Mã này thiết lập một phong cách thanh cuộn nhất quán trên các trình duyệt khác nhau. Nó mỏng, có nền sáng và nút tối.

Và thế là bạn đã nâng cấp kỹ năng CSS của mình và học cách thiết kế thanh cuộn. Nhớ rằng, với quyền lực lớn đi kèm với trách nhiệm - sử dụng các kỹ thuật này một cách khôn ngoan để cải thiện trải nghiệm người dùng, không phải để tạo ra các giao diện gây rối hoặc khó sử dụng.

Tiếp tục thử nghiệm, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ với nó! Ai biết, có thể trend lớn tiếp theo trong thiết kế web sẽ là thanh cuộn độc đáo của bạn. Chúc bạn may mắn với mã code của mình!

Credits: Image by storyset