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

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

DOM style.overflowY प्रॉपर्टी किसी तत्व के कंटेंट के ऊर्ध्वाधर ओवरफ्लो (ऊपर/नीचे) को कैसे संभालना है, यह प्राप्त या सेट करती है। यह CSS overflow-y प्रॉपर्टी के अनुरूप है।

सिंटैक्स

overflowY प्राप्त करना

object.style.overflowY

overflowY सेट करना

object.style.overflowY = "value"

मान

मान	विवरण
`visible`	कंटेंट को क्लिप नहीं करता; तत्व बॉक्स के बाहर बहने देता है (डिफ़ॉल्ट)।
`hidden`	ओवरफ्लोइंग कंटेंट को क्लिप करता है; कोई स्क्रॉलबार नहीं; कंटेंट अप्राप्य।
`scroll`	कंटेंट को क्लिप करता है; हमेशा स्क्रॉलबार दिखाता है (चाहे आवश्यक हो या नहीं)।
`auto`	कंटेंट को क्लिप करता है; केवल जब आवश्यक हो स्क्रॉलबार जोड़ता है (सबसे सामान्य)।
`inherit`	पैरेंट तत्व से मान विरासत में लेता है।
`initial`	डिफ़ॉल्ट मान पर रीसेट करता है (`visible`)।

उदाहरण

यह उदाहरण एक निश्चित ऊंचाई वाले पैराग्राफ पर ऊर्ध्वाधर स्क्रॉलिंग सक्षम करता है:

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

आउटपुट

"ओवरफ्लो बदलें" बटन पर क्लिक करने पर, पैराग्राफ पर एक ऊर्ध्वाधर स्क्रॉलबार दिखाई देता है (क्योंकि कंटेंट 100px ऊंचाई से अधिक है)।

overflowY बनाम overflowX बनाम overflow

प्रॉपर्टी	नियंत्रित करता है	CSS
`overflowY`	ऊर्ध्वाधर ओवरफ्लो (ऊपर/नीचे)	`overflow-y`
`overflowX`	क्षैतिज ओवरफ्लो (बाएं/दाएं)	`overflow-x`
`overflow`	दोनों (शॉर्टहैंड)	`overflow`

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

चैट विंडोज/लॉग पैनल: overflow-y: auto + max-height।
मॉडल बॉडी: लंबे फॉर्म/कंटेंट के लिए स्क्रॉलिंग सक्षम करना।
साइडबार नेविगेशन: निश्चित ऊंचाई वाले साइडबार में स्क्रॉल करने योग्य मेनू।
टेबल बॉडी: tbody { overflow-y: auto; max-height: 300px; display: block; } के साथ निश्चित हेडर।

नोट्स

केवल तभी काम करता है जब तत्व की निश्चित/अधिकतम ऊंचाई हो और कंटेंट उससे बड़ा हो।
auto आमतौर पर scroll से बेहतर UX होता है (स्क्रॉलबार केवल जब आवश्यक हो)।
मोबाइल पर, स्क्रॉलबार अक्सर केवल स्क्रॉलिंग के दौरान दिखाई देते हैं (ओवरले स्क्रॉलबार)।