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

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

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

सिंटैक्स

element.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.scrollWidth > element.clientWidth का अर्थ है क्षैतिज ओवरफ्लो।
• डायनामिक लेआउट: वास्तविक कंटेंट आकार के आधार पर तत्वों का आकार बदलना।
• टेक्स्ट मापन: लंबे शब्दों/यूआरएल के लिए आवश्यक चौड़ाई निर्धारित करना।
• एनिमेशन: चौड़ाई ट्रांज़िशन के लिए प्रारंभिक/अंतिम मान।

नोट्स

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