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

列印頁面