Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

What should be done with the left/ right edges of the content on overflow with JavaScript?

Javascript Web Development Front End Scripts

When content overflows horizontally in a container, the overflowX property controls how the left and right edges are handled. This property allows you to add horizontal scrolling, hide overflow, or make it visible.

Syntax

element.style.overflowX = "value";

Common overflowX Values

Value Description Use Case
scroll Always shows horizontal scrollbar Wide content that needs scrolling
auto Shows scrollbar only when needed Dynamic content width
hidden Clips overflow content Hide excess content
visible Content extends beyond container Default browser behavior

Example: Adding Horizontal Scroll

Click the button to add horizontal scrolling to the overflowing content:

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            width: 350px;
            height: 150px;
            background-color: orange;
            border: 3px solid red;
            white-space: nowrap;
            margin-left: 20px;
         }
         button {
            margin: 10px 0;
            padding: 8px 16px;
            font-size: 14px;
         }
      </style>
   </head>
   <body>
      <p>Click to use overflow property and set scroll:</p>
      <button type="button" onclick="addScroll()">Set Horizontal Scroll</button>
      <button type="button" onclick="hideOverflow()">Hide Overflow</button>
      <button type="button" onclick="resetOverflow()">Reset</button>
      
      
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
      
      
      <script>
         function addScroll() {
            document.getElementById("box").style.overflowX = "scroll";
         }
         
         function hideOverflow() {
            document.getElementById("box").style.overflowX = "hidden";
         }
         
         function resetOverflow() {
            document.getElementById("box").style.overflowX = "visible";
         }
      </script>
   </body>
</html>

Practical Use Cases

Data Tables: Use overflowX: "auto" for responsive tables that need horizontal scrolling on smaller screens.

<!DOCTYPE html>
<html>
   <head>
      <style>
         .table-container {
            width: 300px;
            border: 1px solid #ccc;
            overflow-x: auto;
         }
         table {
            width: 500px;
            border-collapse: collapse;
         }
         th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
         }
      </style>
   </head>
   <body>
      
         <table>
            <tr>
               <th>Product Name</th>
               <th>Price</th>
               <th>Category</th>
               <th>Stock</th>
            </tr>
            <tr>
               <td>Laptop Computer</td>
               <td>$999</td>
               <td>Electronics</td>
               <td>25</td>
            </tr>
            <tr>
               <td>Wireless Mouse</td>
               <td>$29</td>
               <td>Accessories</td>
               <td>150</td>
            </tr>
         </table>
      
   </body>
</html>

Key Points

  • overflowX: "scroll" always shows a horizontal scrollbar
  • overflowX: "auto" shows scrollbar only when content overflows
  • overflowX: "hidden" clips content that extends beyond container
  • Use with white-space: nowrap to prevent text wrapping

Conclusion

The overflowX property provides control over horizontal content overflow. Use "scroll" or "auto" to enable horizontal scrolling, making wide content accessible to users.

Updated on: 2026-03-15T23:18:59+05:30

166 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements