Cách xử lý nội dung hiển thị ra ngoài hộp phần tử với JavaScript (overflow)

Thuộc tính overflow (CSS overflow) là shorthand cho overflow-x và overflow-y, kiểm soát nội dung tràn khung phần tử.

Ví dụ minh họa

Hộp cố định kích thước. Nhấn nút để bật thanh cuộn cả hai chiều:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 450px;
      height: 150px;
      background-color: orange;
      border: 3px solid red;
      margin-left: 20px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <p>Nhấn để bật thanh cuộn.</p>
  <button type="button" onclick="display()">Bật cuộn</button>
  <div id="box">
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
  </div>
  <br><br>
  <script>
    function display() {
      document.getElementById("box").style.overflow = "scroll";
    }
  </script>
</body>
</html>

Các giá trị overflow

Hai giá trị (overflow-x overflow-y)

overflow: auto hidden;  /* x=auto, y=hidden */
overflow: scroll auto;  /* x=scroll, y=auto */