Thuộc tính CSS scrollbar-width xác định độ dày của thanh cuộn trong một phần tử. Nó cho phép điều chỉnh để phù hợp hơn với thiết kế trang web.
Nó cung cấp ba giá trị chính: auto cho chiều rộng mặc định, thin cho thanh cuộn hẹp hơn. Giá trị none dùng để ẩn hoàn toàn thanh cuộn. Điều này nâng cao trải nghiệm hình ảnh khi tương tác nội dung, giúp bạn kiểm soát giao diện tốt hơn.
Cú pháp:
scrollbar-width: auto | thin | none | initial | inherit
Giá trị thuộc tính
Dưới đây là mô tả chi tiết các giá trị của thuộc tính:
| Giá trị | Mô tả |
|---|---|
| auto | Tự động đặt chiều rộng thanh cuộn dựa trên mặc định của trình duyệt. Đây là giá trị mặc định. |
| thin | Đặt chiều rộng thanh cuộn mỏng hơn so với thanh cuộn mặc định. |
| none | Ẩn hoàn toàn thanh cuộn, nhưng vẫn cho phép cuộn nội dung. |
| initial | Đặt lại chiều rộng thanh cuộn về giá trị mặc định ban đầu. |
| inherit | Kế thừa chiều rộng thanh cuộn từ phần tử cha của nó. |
Ví dụ về thuộc tính CSS scrollbar-width
Dưới đây là một số ví dụ minh họa việc sử dụng thuộc tính scrollbar-width:
Ví dụ 1. Chiều rộng thanh cuộn mặc định (scrollbar-width: auto)
Thuộc tính CSS scrollbar-width kiểm soát chiều rộng thanh cuộn trong các phần tử. Sử dụng scrollbar-width: auto; áp dụng chiều rộng mặc định, cân bằng tính thẩm mỹ và khả năng sử dụng.
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS scrollbar-width property</title>
<style>
.scrollbar-auto {
scrollbar-width: auto;
background-color: lightgreen;
height: 150px;
width: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>CSS scrollbar-width</b>
<p>scrollbar-width: auto</p>
<div class="scrollbar-auto">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.
</div>
</body>
</html>
Đầu ra:
Ví dụ 2: Thanh cuộn mỏng (scrollbar-width: thin)
Thuộc tính scrollbar-width: thin làm giảm kích thước thanh cuộn, tạo vẻ ngoài mỏng hơn. Điều này rất lý tưởng cho thiết kế ưu tiên thanh cuộn ít xâm nhập hơn, đồng thời duy trì chức năng cuộn.
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS scrollbar-width</title>
<style>
.scrollbar-thin {
scrollbar-width: thin;
background-color: lightgreen;
height: 150px;
width: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>CSS scrollbar-width</b>
<p>scrollbar-width: thin</p>
<div class="scrollbar-thin">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.
</div>
</body>
</html>
Đầu ra:
Ví dụ 3: Thanh cuộn ẩn (scrollbar-width: none)
Thuộc tính scrollbar-width: none ẩn hoàn toàn thanh cuộn, mang lại thiết kế tối giản hơn. Mặc dù thanh cuộn không hiển thị, nội dung vẫn có thể cuộn được cho người dùng.
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS scrollbar-width</title>
<style>
.scrollbar-none {
scrollbar-width: none;
background-color: lightgreen;
height: 150px;
width: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>CSS scrollbar-width</b>
<p>scrollbar-width: none</p>
<div class="scrollbar-none">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.
</div>
</body>
</html>
Đầu ra:
Ví dụ 4: Đặt lại chiều rộng thanh cuộn về Initial (scrollbar-width: initial)
Trong ví dụ này, thuộc tính scrollbar-width: initial đặt lại thanh cuộn về chiều rộng mặc định. Điều này đảm bảo thanh cuộn tuân theo giao diện chuẩn của trình duyệt. Ngay cả khi kiểu tùy chỉnh đã được áp dụng trước đó. Nội dung vẫn có thể cuộn và hộp có nền màu xanh lục nhạt.
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS scrollbar-width</title>
<style>
.scrollbar-initial {
scrollbar-width: initial;
background-color: lightgreen;
height: 150px;
width: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>CSS scrollbar-width</b>
<p>scrollbar-width: initial</p>
<div class="scrollbar-initial">
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.
</div>
</body>
</html>
Đầu ra:
Ví dụ 5: Kế thừa chiều rộng thanh cuộn (scrollbar-width: inherit)
Thuộc tính scrollbar-width: inherit cho phép phần tử con kế thừa chiều rộng thanh cuộn từ phần tử cha. Điều này đảm bảo nhất quán trên các phần tử lồng nhau.
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS scrollbar-width</title>
<style>
.scrollbar-thin {
scrollbar-width: thin;
background-color: lightgreen;
height: 150px;
width: 200px;
overflow-y: scroll;
margin: 10px;
}
.scrollbar-inherit {
scrollbar-width: inherit;
background-color: green;
height: 50px;
width: 150px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>CSS scrollbar-width</b>
<p>scrollbar-width: inherit</p>
<div class="scrollbar-thin">
<div class="scrollbar-inherit">
This text is inside a parent element.
This div has an inherited scrollbar.
</div>
GeeksforGeeks is a computer science
portal with a huge variety of well
written and explained computer science
and programming articles, quizzes and
interview questions. The portal also
has dedicated GATE preparation and
competitive programming sections.
</div>
</body>
</html>
Đầu ra:
Trình duyệt được hỗ trợ
Thuộc tính scrollbar-width được hỗ trợ bởi trình duyệt sau:
- Firefox 64 trở lên
Lưu ý: Thuộc tính scrollbar-width chủ yếu được hỗ trợ trong Firefox. Các trình duyệt khác như Chrome, Safari và Edge không hỗ trợ nó. Để tương thích đa trình duyệt, hãy sử dụng các phương pháp tạo kiểu thay thế bằng các thuộc tính dành riêng cho nhà cung cấp.