Không phải ai cũng biết Custom scrollbar css là gì vì đây là thuật ngữ mang tính chuyên ngành cao. Bài viết dưới đây từ imonthemes sẽ giúp bạn hiểu hơn về Custom scrollbar css cũng như cách sử dụng nó trên website.
Tìm hiểu nhanh Custom scrollbar css là gì?
Hiểu một cách đơn giản Custom scrollbar css là thanh cuộn tùy chỉnh trên giao diện website. Các thanh cuộn được sử dụng rộng rãi, tuy nhiên nhiều người chưa biết tên tiếng anh của nó nên mới không biết Custom scrollbar css là gì.
Một Custom scrollbar css sẽ bao gồm hai bộ phận chủ chốt là thanh trượt và con lăn. Khi sử dụng website bạn sẽ thấy Custom scrollbar css hoạt động theo cả chiều dọc lẫn chiều ngang (tùy theo thiết kế). Tuy nhiên một số người dùng vẫn hiểu lầm rằng Custom scrollbar css chỉ hoạt động theo chiều dọc do các website hiện nay ưa chuộng lối thiết kế này.
Tùy chỉnh thiết kế custom scrollbar css là gì?
Khi xây dựng website bạn sẽ biết rằng bản thân có thể tùy chỉnh tức cài đặt lại thiết kế đã được mặc định của custom scrollbar css.
Tùy chỉnh cấu trúc Custom scrollbar css là gì?
Tùy theo nhu cầu của mình bạn có thể sử dụng cấu trúc mới hoặc cấu trúc cũ của Custom scrollbar css. Với cấu trúc cũ, bạn có thể xác định và điều chỉnh kích thước của thanh cuộn theo công thức .section::-webkit-scrollbar {width: 10px;}. Lúc này bạn có thể định dạng thanh cuộn bằng cách thêm màu nền, hiệu ứng bóng đổ, định lại bán kính đường viền theo công thức .section::-webkit-scrollbar-track {background-color: darkgrey;}
Ngoài ra bạn cũng có thể thiết kế lại con lăn theo công thức .section::-webkit-scrollbar-thumb {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}.
Nếu bạn sử dụng cấu trúc mới thì có thể thay đổi kích thước thanh cuộn qua cấu trúc .section {scrollbar-width: thin;}. Còn nếu bạn muốn thanh đổi màu của thanh cuộn thì hãy sử dụng cấu trúc .section {scrollbar-color: #6969dd #e0e0e0;scrollbar-width: thin;}. Cấu trúc này sẽ giúp bạn điều chỉnh màu của cả thanh trượt và con lăn. Tất nhiên nó chưa thể thêm độ đổ bóng, độ dốc hay thay đổi góc của cạnh tròn con lăn.
Tùy chỉnh bố cục nội dung Custom scrollbar css là gì?
Khi thay đổi hình dạng của thanh cuộn thì phần nội dung cũng sẽ chịu một số ảnh hưởng nhất định. Ví dụ như khi bạn sử dụng cấu trúc .box {padding: 1rem; max-height: 220px; overflow-y: auto;}. Khi sử dụng cấu trúc này bạn sẽ có định dạng với 16px ở tất cả các bên.
Kéo theo đó phần nội dung sẽ ngắn đi, đồng thời thanh cuộn không được hiển thị vì đã áp dụng cấu trúc overflow-y: auto. Chính vì thế, người dùng cần chú ý là khi chế độ auto được sử dụng overflow-y nó sẽ không hiển thị nội dung nằm bên trong custom scrollbar css cho đến khi nội dung này dài hơn. Như vậy, khi phần nội dung lớn thì thanh cuộn mới được hiển thị và không gian trống của nội dung sẽ bị giảm bớt.
Tùy chỉnh phạm vi Custom scrollbar css là gì?
Khi xây dựng website bạn cần nắm được vị trí của thanh cuộn được hiển thị trên web. Khi xác định chỉnh sửa Custom scrollbar css bạn cần phân tích và cân nhắc xem mình sẽ chỉnh sửa toàn bộ Custom scrollbar css có trên web hay là một vài phần tử cụ thể.
Trong trường hợp bạn muốn thay đổi toàn bộ Custom scrollbar css trên website thì có thể áp dụng cấu trúc ::-webkit-scrollbar { width: 10px;}::-webkit-scrollbar-track {background-color: darkgrey;}::-webkit-scrollbar-thumb { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}.
Trong trường hợp bạn muốn chỉnh sửa một thanh cuộn cụ thể thì phải thêm định dạng hay nhận biết về phần tử đó trước các bộ chọn. Lúc này bạn sẽ áp dụng cấu trúc .section::-webkit-scrollbar {width: 10px;}
.section::-webkit-scrollbar-track {background-color: darkgrey;}
.section::-webkit-scrollbar-thumb {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}
Dù sử dụng cấu trúc mới hay cũ thì bạn đều có thể sử dụng cấu trúc này. Ngoài ra người dùng có thể làm theo một phong cách chung nên sẽ áp dụng cho HTML phần tử, không phải cho Body. Cấu trúc là html {scrollbar-color: #6969dd #e0e0e0;scrollbar-width: thin;}.
Tổng kết
Nhìn chung, bạn chỉ cần nắm được Custom scrollbar css là gì, vai trò của nó trên website. Còn cách điều chỉnh, thiết kế cụ thể bạn có thể bàn giao trách nhiệm cho thiết kế và lập trình viên.