HTML DOM Style overflow प्रॉपर्टी

style.overflow प्रॉपर्टी क्या है?

DOM style.overflow प्रॉपर्टी किसी तत्व के कंटेंट के ओवरफ्लो (दोनों दिशाओं) को कैसे संभालना है, यह प्राप्त या सेट करने के लिए एक शॉर्टहैंड प्रॉपर्टी है। यह CSS overflow शॉर्टहैंड प्रॉपर्टी के अनुरूप है।

सिंटैक्स

overflow प्राप्त करना

object.style.overflow

overflow सेट करना

object.style.overflow = "value"

मान

उदाहरण

यह उदाहरण एक पैराग्राफ पर ओवरफ्लो को scroll से hidden में बदलता है:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p { border: 2px solid #fff; margin: 1.5rem auto; height: 100px; overflow: scroll; }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<h1>DOM Style overflow प्रॉपर्टी उदाहरण</h1>
<p>यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ। यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ। यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ। यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ। यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ। यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ। यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ। यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ। यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ। यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ। यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ।</p>
<button onclick="changeOverflow()" class="btn">ओवरफ्लो बदलें</button>
<script>
  function changeOverflow() {
    document.querySelector('p').style.overflow = "hidden";
  }
</script>
</body>
</html>

आउटपुट

प्रारंभ में पैराग्राफ में दोनों स्क्रॉलबार होते हैं (overflow: scroll)। "ओवरफ्लो बदलें" बटन पर क्लिक करने पर, ओवरफ्लो hidden हो जाता है - अतिरिक्त कंटेंट क्लिप हो जाता है और स्क्रॉलबार गायब हो जाते हैं।

overflow बनाम overflowX/overflowY

शॉर्टहैंड व्यवहार

• एक मान: दोनों दिशाओं पर लागू होता है (overflow: auto → दोनों auto)।
• दो मान: पहला overflow-x, दूसरा overflow-y (overflow: hidden auto)।
• JS में style.overflow पढ़ने पर आमतौर पर विस्तारित रूप या शॉर्टहैंड मान लौटाता है (ब्राउज़र भिन्न)।

सामान्य उपयोग के मामले

• स्क्रॉल करने योग्य कंटेनर: overflow: auto + निश्चित आकार।
• कंटेंट छिपाना: overflow: hidden स्लाइडर्स, ट्रंकेशन, क्लिपिंग के लिए।
• क्लियरफिक्स (लिगेसी): overflow: hidden फ्लोट्स को समाहित करता है (आधुनिक: display: flow-root)।
• मोडल/ड्रॉअर: बॉडी स्क्रॉल लॉक के लिए body.style.overflow = 'hidden'।

नोट्स

• overflow: hidden वाला तत्व नया ब्लॉक फॉर्मेटिंग कॉन्टेक्स्ट बनाता है।
• position: sticky के लिए पैरेंट पर overflow: visible (डिफ़ॉल्ट) आवश्यक है।
• प्रिंट मीडिया में, overflow: hidden कंटेंट को काट सकता है; प्रिंट स्टाइलशीट में overflow: visible उपयोग करें।