Nội dung chính
Scrollbar trong CSS
Đôi khi bạn gặp trường hợp mà phải hiển thị một lượng nội dung lớn hơn nhiều phần không gian được cấp phát cho nó. Bài này sẽ trình bày cách xử lý vấn đề này.
Scrollbar trong CSS, CSS cung cấp thuộc tính overflow để nói cho trình duyệt tạo ra một thanh cuộn. Thuộc tính này có thể nhận một trong các giá trị sau:
| Giá trị | Mô tả |
|---|---|
| visible | Cho phép nội dung có thể tràn qua các đường viền của phần tử chứa nó |
| hidden | Phần nội dung sẽ bị cắt tại cạnh đường viền và sẽ không có thanh cuốn (scrollbar) nào được hiển thị |
| scroll | Kích cỡ của phần tử chứa không thay đổi, nhưng hiển thị (hay thêm vào) các thanh cuốn (scrollbar) để cho phép người dùng thực hiện thao tác scroll để xem hết phần nội dung |
| auto | Tương tự như giá trị scroll, nhưng thanh cuốn (scrollbar) sẽ chỉ được hiển thị nếu kích cỡ của nội dung lớn hơn không gian hộp hiển thị và bị tràn |
Ví dụ Scrollbar trong CSS
Ví dụ sau minh họa cách sử dụng thuộc tính overflow và các giá trị của thuộc tính này trong CSS.
<html>
<head>
<meta charset="UTF-8">
</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>
<body>
<p>Ví dụ scroll của overflow trong CSS:</p>
<div class="scroll">
Từ 3 triệu đã mua được smartphone không tai thỏ, không nốt ruồi nhìn đỡ ngứa mắt!
Có những chiếc smartphone như thế này rồi, tại sao tai thỏ và nốt ruồi lại cứ mãi là xu hướng?
Đó là điện thoại camera ẩn dưới màn hình.
</div>
<br>
<p>Ví dụ auto cua overflow trong CSS:</p>
<div class="auto">
Từ 3 triệu đã mua được smartphone không tai thỏ, không nốt ruồi nhìn đỡ ngứa mắt!
Có những chiếc smartphone như thế này rồi, tại sao tai thỏ và nốt ruồi lại cứ mãi là xu hướng?
Đó là điện thoại camera ẩn dưới màn hình.
</div>
</body>
</html>
Kết quả:
