Cách xử lý tràn nội dung ngang (overflow-x) với JavaScript

Thuộc tính overflowX (CSS overflow-x) kiểm soát hành vi khi nội dung tràn theo chiều ngang: ẩn, cuộn, hoặc hiển thị.

Ví dụ minh họa

Hộp có white-space: nowrap khiến văn bản không ngắt dòng. Nhấn nút để bật thanh cuộn ngang:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 350px;
      height: 150px;
      background-color: orange;
      border: 3px solid red;
      white-space: nowrap;
      margin-left: 20px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <p>Nhấn để bật thanh cuộn ngang.</p>
  <button type="button" onclick="display()">Bật cuộn ngang</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.overflowX = "scroll";
    }
  </script>
</body>
</html>

Các giá trị overflowX

Lưu ý

• overflow-x và overflow-y độc lập. Nếu một là visible, cái kia auto/scroll sẽ tính như auto.
• Dùng overflow: auto (shorthand) cho cả hai chiều.