HTML - DOM 元素 scrollHeight 屬性

**scrollHeight** 屬性以畫素為單位提供元素內容的總垂直高度。它包括溢位和填充，但不包括邊框、邊距和捲軸。

語法

element.scrollHeight;

返回值

scrollHeight 屬性返回一個整數，該整數包含元素內容的總垂直高度（以畫素為單位）。

HTML DOM 元素“scrollHeight”屬性的示例

以下是一些示例，這些示例顯示瞭如何使用“scrollHeight”屬性來獲取元素內容的總垂直高度（以畫素為單位）。

確定可滾動容器的高度

此示例顯示瞭如何使用 scrollHeight 屬性來確定可滾動容器內內容的總高度。程式碼會在 **<span>** 元素中動態更新顯示的高度。

<!DOCTYPE html>
<html lang="en">
<head> 
  <style>
        #container {
            height: 100px;
            overflow: auto;
            border: 1px solid #ccc;
        }
        #content {
            height: 200px; 
            background-color: #f0f0f0;
            padding: 10px;
        }
  </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>scrollHeight Property</h2>
    <div> 
      <p>Determines the height of content inside a 
          scrollable container:
      </p>
      <div id="container">
        <div id="content">
            This is the content inside the div element.
            <br>scroll me!!
        </div>
      </div>
      <p>
        Scrollable content height:<span id="r1"></span>
      </p>
    </div>
    
    <script>
      const c1 = document.getElementById('container');
      const res = document.getElementById('r1');
      res.textContent = c1.scrollHeight;
    </script>
</body>

</html>

動態顯示可滾動內容的高度

此示例顯示了一個可滾動框（**<div>**），使用者可以透過在其中單擊來編輯內容。它包含一個按鈕，該按鈕使用 scrollHeight 屬性動態顯示框的可滾動總高度。

<!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>scrollHeight Property</h2>
   
  <div>
    <p>Click the button to display the total 
      scrollable height 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="showScrollHeight()">
      Show Scrollable Height
    </button>

    <p>Scrollable content height:
        <span id="r"></span>
    </p>
  </div>
  <script>
    function showScrollHeight() {
      const con = document.getElementById('cont');
      const res = document.getElementById('r');
      res.textContent = con.scrollHeight + 'px';
    }
  </script>
</body>

</html>

動態調整 Textarea 高度

此示例顯示了當您鍵入時 scrollHeight 屬性如何調整 Textarea 的高度。Textarea 的高度會更新以適應文字，並且顯示的“當前高度”會根據其內容以畫素為單位顯示實際高度。

<!DOCTYPE html>
<html lang="en">
<head>  
  <style>
    #textcon{
      width: 300px;
      margin: 20px;
    }
    textarea {
      width: 100%;
      min-height: 50px;
      border: 1px solid #ccc;
      padding: 10px;
      box-sizing: border-box; 
      transition: height 0.3s;
    }
  </style>
</head>

<body>
  <h1>HTML - DOM Element</h1>
  <h2>scrollHeight Property</h2>
  <h4>Adjusts height based on scrollable content.</h4>
  <div id="textcon">
  <p>Type in the textarea to see it expand or 
      compress height dynamically:
  </p>
  <textarea id="m" oninput="autoAdjustTextarea(this)">
  </textarea>
    <p>Current height: <span id="ch">50px</span></p>
  </div>

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

</html>

支援的瀏覽器

屬性
scrollHeight	是	是	是	是	是

html_dom_element_reference.htm

列印頁面