CSS - Thanh cuộn
Có thể có trường hợp khi nội dung của phần tử có thể lớn hơn lượng không gian được phân bổ cho nó. Ví dụ: thuộc tính chiều rộng và chiều cao đã cho không cho phép đủ chỗ để chứa nội dung của phần tử.
CSS cung cấp một thuộc tính gọi là tràn để cho trình duyệt biết phải làm gì nếu nội dung của hộp lớn hơn chính hộp đó. Thuộc tính này có thể nhận một trong các giá trị sau:
| Sr.No. | Giá trị & Mô tả |
|---|---|
| 1 | visible Cho phép nội dung tràn ra ngoài đường viền của phần tử chứa nó. |
| 2 | hidden Nội dung của phần tử lồng nhau chỉ đơn giản là cắt bỏ ở đường viền của phần tử chứa và không có thanh cuộn nào hiển thị. |
| 3 | scroll Kích thước của phần tử chứa không thay đổi, nhưng các thanh cuộn được thêm vào để cho phép người dùng cuộn để xem nội dung. |
| 4 | auto Mục đích giống như cuộn, nhưng thanh cuộn sẽ chỉ được hiển thị nếu nội dung bị tràn. |
Đây là một ví dụ -
<html>
<head>
<style type = "text/css">
.scroll {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
</head>
<body>
<p>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
</body>
</html>Nó sẽ tạo ra kết quả sau: