HTML DOM scrollHeight प्रॉपर्टी

scrollHeight प्रॉपर्टी क्या है?

HTML DOM scrollHeight प्रॉपर्टी किसी तत्व की पूरी ऊंचाई (कंटेंट + पैडिंग, लेकिन बॉर्डर/मार्जिन/स्क्रॉलबार नहीं) को पिक्सेल में लौटाती है। यह केवल पढ़ने योग्य (read-only) प्रॉपर्टी है।

सिंटैक्स

element.scrollHeight

उदाहरण

यह उदाहरण (scrollWidth के समान) एक पैराग्राफ की स्क्रॉल ऊंचाई और चौड़ाई को मापता है:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: #ff7f5094;
    height: 100%;
  }
  p {
    font-weight: 700;
    font-size: 1.2rem;
    height: 80px;
    border: 1px solid #fff;
    overflow: auto;
    width: 250px;
    margin: 20px auto;
  }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; }
</style>
</head>
<body>
<h1>DOM scrollHeight/scrollWidth प्रॉपर्टी डेमो</h1>
<p>नमस्ते! मैं HTML में कुछ डमी टेक्स्ट वाला एक पैरा तत्व हूँ। नमस्ते! मैं HTML में कुछ डमी टेक्स्ट वाला एक पैरा तत्व हूँ। नमस्ते! मैं HTML में कुछ डमी टेक्स्ट वाला एक पैरा तत्व हूँ। नमस्ते! मैं HTML में कुछ डमी टेक्स्ट वाला एक पैरा तत्व हूँ।</p>
<button onclick="getHW()" class="btn">पैराग्राफ ऊंचाई और चौड़ाई प्राप्त करें</button>
<div class="show"></div>
<script>
  function getHW() {
    var para = document.querySelector('p');
    document.querySelector(".show").innerHTML =
      "<div>पैरा ऊंचाई = " + para.scrollHeight + " px</div>" +
      "<div>पैरा चौड़ाई = " + para.scrollWidth + " px</div>";
  }
</script>
</body>
</html>

आउटपुट

"पैराग्राफ ऊंचाई और चौड़ाई प्राप्त करें" बटन पर क्लिक करने पर, पैराग्राफ की scrollHeight और scrollWidth प्रदर्शित होती है।

आयाम प्रॉपर्टीज़ तुलना

उपयोग के मामले

• कंटेंट ओवरफ्लो जांच: element.scrollHeight > element.clientHeight का अर्थ है ऊर्ध्वाधर ओवरफ्लो।
• ऑटो-रिसाइज़ टेक्स्टएरिया: टेक्स्टएरिया की ऊंचाई को उसके कंटेंट के अनुसार समायोजित करना (textarea.style.height = textarea.scrollHeight + 'px')।
• अनंत स्क्रॉल ट्रिगर: scrollTop + clientHeight >= scrollHeight से नीचे पहुंचने का पता लगाना।
• एनिमेशन: ऊंचाई ट्रांज़िशन के लिए प्रारंभिक/अंतिम मान (height: 0 → scrollHeight)।

सामान्य पैटर्न

// तत्व की पूरी ऊंचाई प्राप्त करें (छिपे हुए कंटेंट सहित)
var fullHeight = element.scrollHeight;

// क्या तत्व में ओवरफ्लो है?
var hasVerticalOverflow = element.scrollHeight > element.clientHeight;

// ऑटो-रिसाइज़ टेक्स्टएरिया
textarea.addEventListener('input', function() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + 'px';
});

नोट्स

• केवल पढ़ने योग्य - इसे सेट नहीं किया जा सकता।
• सब-पिक्सेल मान लौटाता है (आधुनिक ब्राउज़रों में भिन्नात्मक पिक्सेल)।
• display: none वाले तत्वों के लिए 0 लौटाता है।
• CSS ट्रांसफॉर्म (स्केल) से प्रभावित नहीं होता।