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ó. Chương này sẽ trình bày cách xử lý vấn đề này.

CSS cung cấp thuộc tính overflow để nói cho trình duyệt điều gì cần phải làm nếu nội dung hiển thị của một hộp lớn hơn nhiều phần không gian đã cấp cho hộp đó. Thuộc tính này có thể nhận một trong các giá trị sau:

Giá trịMiêu tả
visibleCho phép nội dung có thể tràn qua các đường viền của phần tử chứa nó
hiddenPhầ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ị
scrollKí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
autoTươ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ụ 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>
   </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>Vi du gia tri scroll cua thuoc tinh overflow trong CSS:</p>
      <div class="scroll">
      Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi 
      kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau 
      ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.
      </div>
      <br />
      <p>Vi du gia tri auto cua thuoc tinh overflow trong CSS:</p>
      <div class="auto">
      Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi 
      kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau 
      ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.
      </div>
   </body>
</html>
Kết quả là:

Vi du gia tri scroll cua thuoc tinh overflow trong CSS:

Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.

Vi du gia tri auto cua thuoc tinh overflow trong CSS:

Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi kha nang mo cua cho cau thu nhap tich len

Bình luận