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

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

HTML DOM style.overflowX प्रॉपर्टी किसी तत्व के कंटेंट के क्षैतिज ओवरफ्लो (बाएं/दाएं) को कैसे संभालना है, यह प्राप्त या सेट करती है। यह CSS overflow-x प्रॉपर्टी के अनुरूप है।

सिंटैक्स

overflowX प्राप्त करना

object.style.overflowX

overflowX सेट करना

object.style.overflowX = "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; white-space: nowrap; }
  .btn {
    background: coral;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<h1>DOM Style overflowX प्रॉपर्टी उदाहरण</h1>
<p>यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ। यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ।</p>
<button onclick="changeOverflow()" class="btn">ओवरफ्लो बदलें</button>
<script>
  function changeOverflow() {
    document.querySelector('p').style.overflowX = "scroll";
  }
</script>
</body>
</html>

आउटपुट

"ओवरफ्लो बदलें" बटन पर क्लिक करने पर, पैराग्राफ पर एक क्षैतिज स्क्रॉलबार दिखाई देता है क्योंकि टेक्स्ट कंटेनर की चौड़ाई से अधिक चौड़ा है (और white-space: nowrap लाइन रैपिंग को रोकता है)।

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

चौड़ी टेबल्स: table { overflow-x: auto; display: block; } मोबाइल पर क्षैतिज स्क्रॉल के लिए।
कोड ब्लॉक्स: pre { overflow-x: auto; } लंबी लाइनों को रैप किए बिना दिखाने के लिए।
इमेज गैलरी/कैरोसेल: क्षैतिज स्क्रॉलिंग कंटेनर।
डेटा ग्रिड्स: निश्चित कॉलम के साथ क्षैतिज स्क्रॉल करने योग्य टेबल बॉडी।

white-space के साथ संबंध

white-space: nowrap - टेक्स्ट को एक लाइन में बाध्य करता है, क्षैतिज ओवरफ्लो बनाता है।
white-space: pre - व्हाइटस्पेस संरक्षित करता है, लंबी लाइनें ओवरफ्लो का कारण बनती हैं।
white-space: normal (डिफ़ॉल्ट) - टेक्स्ट रैप होता है, क्षैतिज ओवरफ्लो दुर्लभ।

नोट्स

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