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

Javascript Web Development Front End Scripts

If the content overflows, the workaround with overflowX property to solve the left/ right edge issues and set a scroll. Adding a scroll allows visitors to easily read the entire content.

Example

You can try to run the following code to learn what is to be done with the left/ right edges of the content on overflow with JavaScript −

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            width: 350px;
            height: 150px;
            background-color: orange;
            border: 3px solid red;
            white-space: nowrap;
            margin-left: 20px;
         }
      </style>
   </head>
   <body>
      <p>Click to use overflow property and set scroll.</p>
      <button type="button" onclick="display()">Set Scroll</button>
      <div id="box">
         <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>
         <p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
      </div>
      <br>
      <br>
      <script>
         function display() {
            document.getElementById("box").style.overflowX = "scroll";
         }
      </script>
   </body>
</html>