Processing math: 100%

JavaScript 中使用溢出时页面内容的左右边缘应该如何处理？

如果内容出现溢出，可以使用 overflowX 属性来解决左右边缘的问题并设置滚动条。添加滚动条可以让访问者轻松阅读全部内容。

示例

你可以尝试运行以下代码，了解如何使用 JavaScript 处理页面内容的左右边缘的问题 −

在线演示

<!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>

更新于: 2020 年 6 月 23 日

53 次浏览

开启你的事业

完成课程即可获得认证

开始学习
广告