ओवरफ़्लो

Reklam Store, The CSS Podcast - 034: Overflow

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

सीएसएस में क्लिप करने के दो अलग-अलग विकल्प होते हैं; 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 प्रॉपर्टी, डिवाइस के व्यूपोर्ट के हॉरिज़ॉन्टल ऐक्सिस के साथ ओवरफ़्लो को कंट्रोल करती है. इसलिए, यह बाईं और दाईं ओर स्क्रोल करती है.

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

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;
}

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

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

रूट-स्क्रोलर बनाम इंप्लिसिट-स्क्रोलर

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

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

आपके स्क्रोलबार की स्टाइल बदली जा रही है

अपनी साइट के डिज़ाइन में शामिल करने के लिए, स्क्रोलबार की स्टाइल में बदलाव किया जा सकता है. scrollbar-color स्क्रोलबार के थंब और गटर के लिए रंग सेट करता है.

स्क्रोलबार की चौड़ाई बदलने के लिए, scrollbar-width का इस्तेमाल करें. इसे किसी भी लंबाई पर सेट नहीं किया जा सकता. हालांकि, यह तय किया जा सकता है कि आपको thin स्क्रोलबार चाहिए या none.

scroll-behavior

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

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

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

overscroll-behavior

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

स्क्रोल स्नैपिंग

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

स्क्रोल कंटेनर सेट अप करना

स्क्रोल स्नैपिंग की सुविधा चालू करने के लिए, स्क्रोल कंटेनर में scroll-snap-type जोड़ें. सबसे पहले, आपको यह तय करना होगा कि स्क्रोल स्नैपिंग किस ऐक्सिस पर होगी. यह लॉजिकल प्रॉपर्टी (block या inline), फ़िज़िकल प्रॉपर्टी (x या y) या both हो सकती है.

यह भी तय किया जा सकता है कि स्क्रोल स्नैपिंग कितनी सटीक होनी चाहिए. डिफ़ॉल्ट रूप से, स्नैपिंग का तरीका proximity पर सेट होता है. इसका मतलब है कि स्क्रोल कंटेनर, स्नैप करने की कोशिश करेगा. स्क्रोल कंटेनर को हमेशा स्नैप करने के लिए, mandatory पर सेट किया जा सकता है.

.scroll-container {
    scroll-snap-type: block mandatory;
}

स्क्रोल स्नैपिंग, स्क्रोल कंटेनर की पूरी सीमा के अंदर किसी एलिमेंट को अलाइन करती है. हालांकि, अगर स्क्रोल कंटेनर का कुछ हिस्सा नहीं दिखता है, तो क्या होगा? उदाहरण के लिए, आपके पास ऐसा फ़िक्स्ड हेडर हो सकता है जो स्क्रोल कंटेनर के कुछ हिस्से पर ओवरले करता हो. स्नैप किए गए एलिमेंट को स्क्रोल कंटेनर के दिखने वाले हिस्से के साथ अलाइन करने के लिए, scroll-padding सेट किया जा सकता है.

स्नैप किए जा सकने वाले एलिमेंट को कंट्रोल करना

किसी एलिमेंट को स्नैप किया जा सकने वाला बनाने के लिए, scroll-snap-align प्रॉपर्टी को start, end या center पर सेट करें. अगर स्क्रोल स्नैप की दिशा both है, तो दो वैल्यू सेट की जा सकती हैं. इससे यह तय होता है कि एलिमेंट का कोई किनारा, स्क्रोलपोर्ट के किनारे के साथ अलाइन होगा या बीच में होगा.

स्नैप किए गए एलिमेंट के किनारों के आस-पास की जगह को scroll-margin की मदद से अडजस्ट किया जा सकता है:

scroll-margin का इस्तेमाल, किसी एलिमेंट पर स्क्रोल करते समय पैडिंग सेट करने के लिए भी किया जाता है:

स्क्रोलिंग को ज़्यादा स्टिकी बनाने के लिए, स्क्रोल कंटेनर में मौजूद किसी आइटम में scroll-snap-stop: always जोड़ा जा सकता है. इससे आपको एक बार में स्क्रोल करके कई आइटम देखने से नहीं रोका जाता. अगर स्क्रोलिंग को इस तरह से रोका जाता है कि स्क्रोलिंग जारी रहती है, तो स्क्रोलिंग अगली स्नैप पोज़िशन पर रुक जाएगी.

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

संसाधन

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