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: