ओवरफ़्लो

जब कॉन्टेंट, पैरंट से ज़्यादा बड़ा हो जाता है, तो उसे मैनेज करने के कई विकल्प होते हैं. ज़्यादा स्पेस जोड़ने के लिए स्क्रोल किया जा सकता है, ओवरफ़्लो होने वाले किनारों को क्लिप किया जा सकता है, एलिप्सिस के साथ कट-ऑफ़ को दिखाया जा सकता है, और बहुत कुछ किया जा सकता है. फ़ोन ऐप्लिकेशन और अलग-अलग स्क्रीन साइज़ के लिए डेवलप करते समय, ओवरफ़्लो को ध्यान में रखना ज़रूरी है.

सीएसएस में क्लिप करने के दो अलग-अलग विकल्प होते हैं; text-overflow से टेक्स्ट की अलग-अलग लाइनों को क्लिप किया जा सकता है. वहीं, overflow प्रॉपर्टी से बॉक्स मॉडल में ओवरफ़्लो को कंट्रोल किया जा सकता है.

text-overflow के साथ सिंगल लाइन ओवरफ़्लो

text-overflow प्रॉपर्टी का इस्तेमाल, ऐसे किसी भी एलिमेंट के लिए करें जिसमें टेक्स्ट नोड शामिल हों. उदाहरण के लिए, पैराग्राफ़, <p>. इससे यह तय होता है कि जब टेक्स्ट एलिमेंट के उपलब्ध स्पेस में फ़िट नहीं होता, तो वह कैसा दिखता है. किसी पेज पर दिखने वाला पूरा एचटीएमएल टेक्स्ट, टेक्स्ट नोड में होता है. text-overflow का इस्तेमाल करने के लिए, आपको टेक्स्ट की एक ऐसी लाइन चाहिए जिसे रैप न किया गया हो. इसलिए, आपको overflow को hidden पर सेट करना होगा. साथ ही, white-space की ऐसी वैल्यू भी होनी चाहिए जिससे टेक्स्ट रैप न हो.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

ओवरफ़्लो प्रॉपर्टी का इस्तेमाल करना

किसी एलिमेंट पर ओवरफ़्लो प्रॉपर्टी सेट की जाती हैं, ताकि यह कंट्रोल किया जा सके कि जब उसके चिल्ड्रन एलिमेंट को ज़्यादा जगह की ज़रूरत हो, तो क्या होगा. ऐसा जान-बूझकर भी किया जा सकता है. जैसे, Google Maps जैसे इंटरैक्टिव मैप में, जहां उपयोगकर्ता किसी खास साइज़ में काटी गई बड़ी इमेज को पैन करता है. यह अनजाने में भी हो सकता है. जैसे, चैट ऐप्लिकेशन में उपयोगकर्ता ने लंबा मैसेज टाइप किया हो, जो टेक्स्ट बबल में न फ़िट हो.

ओवरफ़्लो को दो हिस्सों में बांटा जा सकता है. पैरंट एलिमेंट के लिए, स्पेस की तय सीमा होती है, जो नहीं बदलेगी. इसे विंडो के तौर पर समझा जा सकता है. चाइल्ड एलिमेंट, ऐसे कॉन्टेंट होते हैं जिन्हें पैरंट एलिमेंट से ज़्यादा स्पेस चाहिए. इसे इस तरह से समझें कि आपने खिड़की से बाहर क्या देखा. ओवरफ़्लो को मैनेज करने से, यह तय करने में मदद मिलेगी कि विंडो इस कॉन्टेंट को कैसे फ़्रेम करेगी.

वर्टिकल और हॉरिज़ॉन्टल ऐक्सिस पर स्क्रोल करना

overflow-y प्रॉपर्टी, डिवाइस व्यूपोर्ट के वर्टिकल ऐक्सिस के साथ फ़िज़िकल ओवरफ़्लो को कंट्रोल करती है. इसलिए, इसे ऊपर और नीचे स्क्रोल किया जा सकता है.

overflow-x प्रॉपर्टी, डिवाइस व्यूपोर्ट के हॉरिज़ॉन्टल ऐक्सिस पर ओवरफ़्लो को कंट्रोल करती है. इसलिए, इसे बाईं और दाईं ओर स्क्रोल किया जा सकता है.

स्क्रोल की दिशा के लिए लॉजिकल प्रॉपर्टी

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

overflow-inline और overflow-block प्रॉपर्टी, दस्तावेज़ की दिशा और लिखने के मोड के आधार पर ओवरफ़्लो सेट करती हैं.

overflow का शॉर्टहैंड

overflow शॉर्टहैंड, एक लाइन में overflow-x और overflow-y, दोनों स्टाइल सेट करता है:

overflow: hidden scroll;

अगर दो कीवर्ड दिए गए हैं, तो पहला overflow-x पर और दूसरा overflow-y पर लागू होगा. ऐसा न होने पर, overflow-x और overflow-y, दोनों एक ही वैल्यू का इस्तेमाल करते हैं.

वैल्यू

आइए, overflow प्रॉपर्टी के लिए उपलब्ध वैल्यू और कीवर्ड पर नज़र डालते हैं.

overflow: visible (डिफ़ॉल्ट)
प्रॉपर्टी सेट किए बिना, वेब के लिए डिफ़ॉल्ट वैल्यू overflow: visible होती है. इससे यह पक्का होता है कि कॉन्टेंट अनजाने में कभी छिप न जाए. साथ ही, यह "कॉन्टेंट को कभी छिपाएं नहीं" या "सटीक लेआउट के सुरक्षित लेआउट" के मुख्य सिद्धांतों का पालन करता है.
overflow: hidden
overflow: hidden का इस्तेमाल करने पर, कॉन्टेंट को तय की गई दिशा में क्लिप किया जाता है. साथ ही, उसे दिखाने के लिए स्क्रोलबार नहीं दिए जाते.
overflow: scroll
overflow: scroll, स्क्रोलबार की सुविधा चालू करता है, ताकि उपयोगकर्ता कॉन्टेंट को स्क्रोल कर सकें. भले ही, फ़िलहाल कॉन्टेंट ओवरफ़्लो न हो रहा हो, लेकिन स्क्रोलबार मौजूद होंगे. अगर आने वाले समय में किसी कंटेनर को स्क्रोल किया जा सकता है, तो लेआउट में होने वाले बदलाव को कम करने के लिए यह एक बेहतरीन तरीका है. उदाहरण के लिए, साइज़ बदलने पर. साथ ही, यह उपयोगकर्ता को स्क्रोल किए जा सकने वाले हिस्सों के लिए, विज़ुअल तौर पर तैयार करता है.
overflow: clip
overflow: hidden की तरह, overflow: clip वाले कॉन्टेंट को एलिमेंट के पैडिंग बॉक्स में क्लिप किया जाता है. clip और hidden में अंतर यह है कि clip कीवर्ड, प्रोग्राम के हिसाब से स्क्रोल करने के साथ-साथ, सभी तरह के स्क्रोल करने पर भी पाबंदी लगाता है.
overflow: auto
आखिर में, सबसे ज़्यादा इस्तेमाल की जाने वाली वैल्यू, overflow: auto. यह उपयोगकर्ता की प्राथमिकताओं का सम्मान करता है और ज़रूरत पड़ने पर स्क्रोलबार दिखाता है. हालांकि, इसे डिफ़ॉल्ट रूप से छिपाया जाता है. साथ ही, स्क्रोल करने की ज़िम्मेदारी उपयोगकर्ता और ब्राउज़र को दी जाती है.

स्क्रोल और ओवरफ़्लो

इनमें से कई overflow व्यवहारों में स्क्रोलबार का इस्तेमाल होता है. हालांकि, स्क्रोल करने के कुछ खास तरीके और प्रॉपर्टी हैं जिनकी मदद से, अपने ओवरफ़्लो कंटेनर पर स्क्रोल करने की सुविधा को कंट्रोल किया जा सकता है.

स्क्रोल करना और सुलभता

यह पक्का करना ज़रूरी है कि स्क्रोल किए जा सकने वाले एरिया पर फ़ोकस किया जा सके, ताकि कीबोर्ड का इस्तेमाल करने वाला व्यक्ति, बॉक्स पर टैब करके, ऐरो बटन का इस्तेमाल करके स्क्रोल कर सके.

स्क्रोलिंग बॉक्स को फ़ोकस करने की अनुमति देने के लिए, tabindex="0" जोड़ें. साथ ही, aria-labelledby एट्रिब्यूट के साथ कोई नाम और सही role एट्रिब्यूट जोड़ें. उदाहरण के लिए:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

इसके बाद, सीएसएस का इस्तेमाल करके यह दिखाया जा सकता है कि बॉक्स पर फ़ोकस है. इसके लिए, outline प्रॉपर्टी का इस्तेमाल करके यह विज़ुअल क्ल्यू दिया जा सकता है कि अब इसे स्क्रोल किया जा सकता है.

सुलभता को लागू करने के लिए सीएसएस का इस्तेमाल करना में, एड्रियन रोसेली ने बताया है कि सीएसएस का इस्तेमाल करके, सुलभता में होने वाली गिरावट को कैसे रोका जा सकता है. उदाहरण के लिए, सही एट्रिब्यूट का इस्तेमाल करने पर ही स्क्रोलिंग चालू करने और फ़ोकस इंडिकेटर जोड़ने के लिए. नीचे दिए गए नियमों के मुताबिक, बॉक्स को सिर्फ़ तब स्क्रोल किया जा सकेगा, जब उसमें tabindex, aria-labelledby, और role एट्रिब्यूट मौजूद हों.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

बॉक्स मॉडल में स्क्रोलबार की पोज़िशन

स्क्रोल बार, पैडिंग बॉक्स में जगह लेते हैं. अगर overlaid के बजाय inline का इस्तेमाल किया जाता है, तो वे जगह के लिए प्रतिस्पर्धा कर सकते हैं. बॉक्स मॉडल मॉड्यूल, लेआउट शिफ़्ट के इस संभावित सोर्स के बारे में ज़्यादा जानकारी देता है.

root-scroller बनाम implicit-scroller

आपको यह दिख सकता है कि कुछ स्क्रोलर में 'खींचकर रीफ़्रेश करें' और अन्य खास सुविधाएं होती हैं. ऐसा खास तौर पर, मोबाइल और हाइब्रिड ऐप्लिकेशन के लिए डेवलप करते समय होता है. स्क्रोल करने का यह तरीका, रूट स्क्रोलर पर होता है. किसी पेज पर सिर्फ़ एक रूट स्क्रोलर होता है. डिफ़ॉल्ट रूप से, documentElement पेज का रूट स्क्रोलर होता है. हालांकि, रूट स्क्रोलर के तौर पर किसी दूसरे एलिमेंट को चुनकर, documentElement के अलावा अन्य स्क्रोलर पर खास व्यवहार लागू किए जा सकते हैं. हम इस नए स्क्रोलर को इंप्लिसिट रूट स्क्रोलर कहते हैं.

रूट स्क्रोलर बनाने के लिए, स्क्रोलर प्रमोशन का इस्तेमाल किया जा सकता है. इसके लिए, किसी कंटेनर को 'फ़िक्स्ड' के तौर पर पोज़िशन करें. साथ ही, पक्का करें कि वह पूरे व्यूपोर्ट को कवर करता हो और स्क्रोलर के साथ सबसे ऊपर z-index हो. रूट स्क्रोलर बनाम नेस्ट किए गए इंप्लिसिट स्क्रोलर के बारे में यहां जानें.

इस वीडियो में, बाउंस करने की सुविधा और नई स्टाइल की सुविधाओं वाले रूट स्क्रोलर को दिखाया गया है.
इसकी तुलना में, स्क्रोल करने की बेहतर सुविधाओं के बिना, स्क्रोल करने वाले स्क्रोलर को दिखाया गया है.

scroll-behavior

Browser Support

  • Chrome: 61.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 15.4.

Source

scroll-behavior की मदद से, एलिमेंट पर ब्राउज़र से कंट्रोल किए जाने वाले स्क्रोल के लिए ऑप्ट इन किया जा सकता है. इससे यह तय किया जा सकता है कि .scrollTo() या लिंक जैसे इन-पेज नेविगेशन को कैसे मैनेज किया जाए.

यह खास तौर पर तब काम आता है, जब उपयोगकर्ता की प्राथमिकता के आधार पर स्क्रोल करने के व्यवहार की जानकारी देने के लिए, prefers-reduced-motion के साथ इसका इस्तेमाल किया जाता है.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Browser Support

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

Source

अगर आपने कभी किसी मॉडल ओवरले के आखिर तक स्क्रोल किया है और फिर स्क्रोल करना जारी रखा है, तो ओवरले के पीछे मौजूद पेज भी आगे बढ़ गया होगा. इसे स्क्रोल चेनिंग या पैरंट स्क्रोल कंटेनर में बबल अप करना कहते हैं. overscroll-behavior प्रॉपर्टी की मदद से, पैरंट कंटेनर में ओवरफ़्लो स्क्रोलिंग को रोका जा सकता है. इसे स्क्रोल चेनिंग कहा जाता है.

देखें कि आपको क्या समझ आया

ओवरफ़्लो के बारे में अपनी जानकारी की जांच करना

क्या टेक्स्ट ओवरफ़्लो और एलिमेंट ओवरफ़्लो एक ही हैं?

गलत
सही

overflow प्रॉपर्टी में दो कीवर्ड डाले जा सकते हैं. पहला कीवर्ड किस ऐक्सिस के लिए है?

वर्टिकल
हॉरिज़ॉन्टल

बॉक्स मॉडल में, इनलाइन और दिखाने के दौरान स्क्रोलबार किस जगह का इस्तेमाल करते हैं?

पैडिंग बॉक्स
मार्जिन बॉक्स
कॉन्टेंट बॉक्स
बॉर्डर बॉक्स

नेस्ट किए गए इंप्लिसिट स्क्रोलर में स्क्रोल करने से मिलने वाले अतिरिक्त मोमेंटम को ट्रैप करने के लिए, किस प्रॉपर्टी का इस्तेमाल किया जाएगा?

overscroll-behavior
overscroll-effect
scroll-padding
scroll-behavior
scroll-hint

संसाधन

Smashing Magazine से सीएसएस में ओवरफ़्लो और डेटा लॉस