HTML - DOM 元素 scrollWidth 属性

scrollWidth 属性以像素为单位返回元素内容的总水平宽度。它包括溢出和内边距，但不包括边框、外边距和滚动条。

语法

element.scrollWidth;

返回值

scrollWidth 属性返回一个整数，表示元素内容的总水平宽度（以像素为单位）。

HTML DOM 元素 'scrollWidth' 属性示例

以下是一些示例，演示了如何使用 'scrollWidth' 属性获取元素内容的总水平宽度（以像素为单位）。

确定可滚动容器的宽度

此示例演示了如何使用 scrollWidth 属性确定可滚动容器内内容的总宽度。代码会在 <span> 元素中动态更新显示的宽度。

 <!DOCTYPE html>
<html lang="en">
<head>  
  <style>
    #con{
      width: 200px;
      height: 100px;
      overflow: auto;
      border: 1px solid black;
      
    }
    #content {
      width: 300px;
      height: 150px; 
    }
  </style>
</head>
<body>
  <h1>HTML - DOM Element</h1>
  <h2>scrollWidth Property</h2>
  <p>
    Determines the width of content 
    inside a scrollable container:
  </p>
  <div id="con">
    <div id="content">
      This is the content inside the div element.
      <br>scroll me!!
    </div>
  </div>

  <p>Scrollable container width:
      <span id="res"></span> pixels
  </p>

  <script>
    const cont=document.getElementById('con');
    const r = document.getElementById('res');
    r.textContent = cont.scrollWidth;
  </script>
</body>

</html>

动态显示可滚动内容宽度

此示例显示了一个可滚动的盒子 ( <div>)，用户可以点击其中进行内容编辑。它包含一个按钮，该按钮使用 scrollWidth 属性动态显示盒子的总可滚动宽度。

<!DOCTYPE html>
<html lang="en">
<head>  
<style>
  #cont {
    height: 30px;
    overflow: auto;
    border: 1px solid black;
    padding: 10px;
  }
</style>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>scrollWidth Property</h2>

  <div>
    <p>Click the button to display the total 
      scrollable width of the container:
    </p>
    <p>Try editing the content inside the container.</p>
    <div id="cont" contenteditable="true">
      Click here to edit!!
      Content that exceeds the container height.
    </div>
    <br>
    <button onclick="showScrollWidth()">
      Show Scrollable Width
    </button>
    <p>
      Scrollable content width:<span id="r"></span>
    </p>
  </div>

  <script>
    function showScrollWidth() {
      const con = document.getElementById('cont');
      const r = document.getElementById('r');
      r.textContent = con.scrollWidth + 'px';
    }
  </script>
</body>

</html>

动态调整文本区域宽度

此示例演示了如何在您键入时 scrollWidth 属性如何调整文本区域的宽度。文本区域的宽度会更新以适应文本，并且显示的“当前宽度”会根据其内容显示实际宽度（以像素为单位）。

 <!DOCTYPE html>
<html lang="en">
<head>  
  <style>
    #textcon {
      width: 300px;
      margin: 20px;
      border: 1px solid #ccc;
      padding: 10px;
      overflow-x: auto;
    }
    text{  
      border: 1px solid black;
      box-sizing: border-box; 
      transition: height 0.3s;
    }
  </style>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>scrollWidth Property</h2>
  <h4>Determines the total width of 
  	scrollable content.
  </h4>
  
  <div id="textcon">
    <p>Type in the textarea to see it expand or 
    	compress width dynamically:
    </p>
    <textarea id="m" oninput="autoAdjustTextarea(this)">
    </textarea>
    <p>Current width:<span id="ch">Auto</span>
    </p>
  </div>

  <script>
    function autoAdjustTextarea(text) {
      text.style.height = 'auto';  
      text.style.height = text.scrollHeight + 'px';  
      document.getElementById('ch').textContent = 
      text.scrollWidth + 'px';  
    }
  </script>
</body>

</html>

支持的浏览器

属性
scrollWidth	是	是	是	是	是

html_dom_element_reference.htm

打印页面