Trong bài viết này chúng ta sẽ đi sâu vào thế giới của thanh cuộn. Tôi biết, nghe có vẻ không quá hấp dẫn, nhưng hãy tin tôi đi, một trang được thiết kế tốt sẽ đi đôi với thanh cuộn phù hợp. Thanh cuộn chrome kiểu cũ không còn phù hợp nữa.
Chúng ta sẽ xem xét các chi tiết thực tế của thanh cuộn và sau đó xem xét một số ví dụ thú vị.
Các thành phần của thanh cuộn
Đây thực sự là một sự bồi dưỡng hơn. có một rất nhiều bài đăng ngay tại đây về CSS-Tricks đi sâu vào chi tiết khi nói đến kiểu dáng thanh cuộn tùy chỉnh trong CSS.
Để tạo kiểu cho thanh cuộn, bạn cần làm quen với cấu trúc của thanh cuộn. Hãy nhìn vào hình minh họa này:
Hai thành phần chính cần ghi nhớ ở đây là:
- Sản phẩm theo dõi là nền bên dưới thanh.
- Sản phẩm ngón tay cái là phần mà người dùng nhấp và kéo xung quanh.
Chúng ta có thể thay đổi các thuộc tính của thanh cuộn hoàn chỉnh bằng cách sử dụng tiền tố của nhà cung cấp::-webkit-scrollbar bộ chọn. Chúng ta có thể tạo cho thanh cuộn một chiều rộng cố định, màu nền, các góc bo tròn… rất nhiều thứ! Nếu chúng ta đang tùy chỉnh thanh cuộn chính của một trang thì chúng ta có thể sử dụng ::-webkit-scrollbar trực tiếp trên phần tử HTML:
html::-webkit-scrollbar {
/* Style away! */
}Nếu chúng tôi đang tùy chỉnh hộp cuộn thì đó là kết quả của overflow: scroll, sau đó chúng ta có thể sử dụng ::-webkit-scrollbar trên phần tử đó thay vào đó:
.element::-webkit-scrollbar {
/* Style away! */
}Dưới đây là một ví dụ nhanh về cách tạo kiểu cho thanh cuộn của phần tử HTML sao cho nó rộng với nền màu đỏ:
Điều gì sẽ xảy ra nếu chúng ta chỉ muốn thay đổi ngón tay cái hoặc rãnh của thanh cuộn? Bạn đoán xem - chúng tôi có các phần tử giả có tiền tố đặc biệt cho hai phần tử đó: ::-webkit-scrollbar-thumb và ::-webkit-scrollbar-track, tương ứng. Đây là ý tưởng về những gì có thể thực hiện được khi chúng ta kết hợp tất cả những thứ này lại với nhau:
Đánh răng đủ rồi! Tôi muốn cho bạn thấy ba cấp độ của kiểu dáng thanh cuộn tùy chỉnh, sau đó mở ra một kho trưng bày lớn các ví dụ được lấy từ khắp nơi trên web để lấy cảm hứng.
Thanh cuộn đơn giản và sang trọng
Thanh cuộn tùy chỉnh vẫn có thể ở mức tối thiểu. Tôi tập hợp một nhóm các ví dụ có thể thay đổi hình thức một cách tinh tế, cho dù chỉ thay đổi một chút màu sắc ở ngón tay cái hoặc bản nhạc hay một số kiểu dáng nhẹ nhàng cho nền.
Như bạn có thể thấy, chúng ta không cần phải quá lo lắng khi nói đến kiểu dáng thanh cuộn. Đôi khi chỉ cần một sự thay đổi tinh tế để nâng cao trải nghiệm tổng thể của người dùng bằng thanh cuộn phù hợp với chủ đề tổng thể.
Thanh cuộn bắt mắt thú vị
Nhưng hãy thừa nhận điều đó: thật thú vị khi đi quá đà một chút và rèn luyện khả năng sáng tạo. Dưới đây là một số thanh cuộn kỳ lạ và độc đáo có thể “quá nhiều” trong một số trường hợp, nhưng chúng chắc chắn rất bắt mắt.
Một lần nữa…
Vậy thì sao chúng ta không sử dụng thanh cuộn để quay một vòng tàu cho ngón tay cái và theo dõi đường đua!
