CSS में clientHeight, offsetHeight और scrollHeight प्रॉपर्टीज को समझना

clientHeight

clientHeight किसी एलिमेंट की ऊंचाई का माप देता है जिसमें **पैडिंग** शामिल होता है। ध्यान दें कि बॉर्डर, मार्जिन, और स्क्रॉलबार ऊंचाई (यदि रेंडर किया गया) इसमें शामिल नहीं होते।

offsetHeight

offsetHeight किसी एलिमेंट की ऊंचाई का माप देता है जिसमें **वर्टिकल पैडिंग, टॉप और बॉटम बॉर्डर्स** शामिल होते हैं। मार्जिन इसमें शामिल नहीं होता।

scrollHeight

scrollHeight किसी एलिमेंट की ऊंचाई का माप देता है जिसमें **वर्टिकल पैडिंग और वह कंटेंट शामिल होता है जो अपने overflow प्रॉपर्टी के कारण स्क्रीन पर दृश्यमान नहीं होता**।

तुलना तालिका

उदाहरण 1: clientHeight

<!DOCTYPE html>
<html>
<head>
  <style>
    #parent {
      margin-top: 10px;
      height: 200px;
      width: 200px;
      overflow: auto;
      margin: 20px;
    }
    #demo {
      height: 250px;
      padding: 20px;
      background-color: beige;
      border: 2px ridge red;
    }
  </style>
</head>
<body>
  <button onclick="getHeight()">Get Client Height</button>
  <div id="parent">
    <div id="demo">
      <ul><li>a</li><li>b</li><li>c</li></ul>
    </div>
  </div>
  <article id="display"></article>
  <script>
    function getHeight() {
      let myItem = document.getElementById("demo");
      let y = myItem.clientHeight;
      document.getElementById("display").innerHTML = "Client Height is " + y + "px";
    }
  </script>
</body>
</html>

उदाहरण 2: offsetHeight

<!DOCTYPE html>
<html>
<head>
  <style>
    #parent {
      height: 180px;
      width: 180px;
      overflow: auto;
      margin: 20px;
    }
    #demo {
      height: 220px;
      padding: 20px;
      background-color: cornflowerblue;
      border: 10px ridge red;
      color: white;
    }
  </style>
</head>
<body>
  <button onclick="getHeight()">Get Offset Height</button>
  <div id="parent">
    <div id="demo">
      <ul><li>a</li><li>b</li><li>c</li></ul>
    </div>
  </div>
  <article id="display"></article>
  <script>
    function getHeight() {
      let myItem = document.getElementById("demo");
      let y = myItem.offsetHeight;
      document.getElementById("display").innerHTML = "Offset Height is " + y + "px";
    }
  </script>
</body>
</html>

उदाहरण 3: scrollHeight

<!DOCTYPE html>
<html>
<head>
  <style>
    #parent {
      margin-top: 10px;
      height: 200px;
      width: 200px;
      overflow: auto;
      margin: 20px;
    }
    #demo {
      height: 400px;
      padding: 20px;
      background-color: bisque;
      border: 1px solid green;
    }
  </style>
</head>
<body>
  <button onclick="getHeight()">Get Scroll Height</button>
  <div id="parent">
    <div id="demo">
      <ul><li></li><li></li><li></li></ul>
    </div>
  </div>
  <article id="display"></article>
  <script>
    function getHeight() {
      let myItem = document.getElementById("demo");
      let y = myItem.scrollHeight;
      document.getElementById("display").innerHTML = "Scroll Height is " + y + "px";
    }
  </script>
</body>
</html>

संबंधित प्रॉपर्टीज (चौड़ाई के लिए)

व्यावहारिक उपयोग के मामले

• स्क्रॉल डिटेक्शन: element.scrollTop + element.clientHeight >= element.scrollHeight → नीचे पहुंचा
• इन्फिनिट स्क्रॉल: लोड ट्रिगर करने के लिए scrollHeight की निगरानी करें
• एलिमेंट विजिबिलिटी: getBoundingClientRect() के साथ तुलना करें
• लेआउट गणना: डायनामिक पोजिशनिंग के लिए offsetHeight