CSS और HTML का उपयोग करके स्क्रॉलिंग टेक्स्ट के साथ एक बॉक्स बनाएं

एक एचटीएमएल स्क्रॉल बॉक्स एक बॉक्स है जो स्क्रॉल बार को दाईं ओर और नीचे जोड़ता है जब बॉक्स की सामग्री बॉक्स आयामों से बड़ी होती है। दूसरे शब्दों में, यदि आपके पास एक बॉक्स है जो लगभग 50 शब्दों में फिट हो सकता है, और आपके पास 200 शब्दों का टेक्स्ट है, तो एक HTML स्क्रॉल बॉक्स आपको अतिरिक्त 150 शब्दों को देखने के लिए स्क्रॉल बार रखेगा। मानक HTML में जो बॉक्स के बाहर अतिरिक्त टेक्स्ट को आसानी से धक्का देगा।

HTML स्क्रॉल बनाना काफी आसान है। आपको बस चौड़ाई निर्धारित करने की आवश्यकता है और ऊंचाई जिस तत्व को आप स्क्रॉल करना चाहते हैं और फिर उसका उपयोग करें सीएसएस ओवरफ़्लो प्रॉपर्टी सेट करने के लिए कि आप स्क्रॉलिंग कैसे करना चाहते हैं।

अतिरिक्त पाठ के साथ क्या करना है?

जब आपके पास अपने लेआउट में जगह में फिट होने से अधिक टेक्स्ट होगा, तो आपके पास कुछ विकल्प होंगे:

• पाठ को फिर से लिखें ताकि यह छोटा हो और फिट हो जाए।
• पाठ को सीमा से परे बहने दें और आशा करें कि लेआउट इसका समर्थन करने के लिए फ्लेक्स कर सकता है।
• उस टेक्स्ट को काट दें जहां यह ओवरफ्लो होता है।
• स्क्रॉल बार जोड़ें (आमतौर पर टेक्स्ट के लिए लंबवत) ताकि स्पेस अतिरिक्त टेक्स्ट दिखाने के लिए स्क्रॉल करे।

सबसे अच्छा विकल्प आम तौर पर अंतिम विकल्प होता है: एक स्क्रॉलिंग टेक्स्ट बॉक्स बनाएं। तब अतिरिक्त पाठ अभी भी पढ़ा जा सकता है, लेकिन आपके डिज़ाइन से समझौता नहीं किया जाता है।

इसके लिए एचटीएमएल और सीएसएस होगा:

टेक्स्ट यहां... 

अतिप्रवाह: ऑटो; ब्राउजर को स्क्रॉल बार जोड़ने के लिए कहता है यदि टेक्स्ट को div की सीमाओं से बहने से रोकने के लिए उनकी आवश्यकता होती है। लेकिन इसके लिए काम करने के लिए, आपको डिव पर सेट की गई चौड़ाई और ऊंचाई शैली के गुणों की भी आवश्यकता है, ताकि अतिप्रवाह की सीमाएँ हों।

आप ओवरफ्लो को बदलकर टेक्स्ट को काट भी सकते हैं: ऑटो; सेवा मेरे बहुत ज्यादा गोपनीय; यदि आप अतिप्रवाह संपत्ति को छोड़ देते हैं, तो पाठ div की सीमाओं पर फैल जाएगा।

आप स्क्रॉल बार्स को केवल टेक्स्ट से अधिक में जोड़ सकते हैं

यदि आपके पास एक बड़ी छवि है जिसे आप छोटे स्थान में प्रदर्शित करना चाहते हैं, तो आप उसके चारों ओर उसी तरह स्क्रॉल बार जोड़ सकते हैं जैसे आप टेक्स्ट के साथ करते हैं।

इस उदाहरण में, 400x509 छवि 300x300 अनुच्छेद के अंदर है।

स्क्रॉल बार्स से टेबल्स को फायदा हो सकता है

जानकारी की लंबी तालिकाओं को बहुत जल्दी पढ़ना बहुत मुश्किल हो सकता है, लेकिन उन्हें सीमित आकार के डिव के अंदर रखने से और फिर अतिप्रवाह संपत्ति जोड़कर, आप बहुत सारे डेटा के साथ तालिकाएँ उत्पन्न कर सकते हैं जो आपके ऊपर अत्यधिक स्थान नहीं लेती हैं पृष्ठ।

सबसे आसान तरीका छवियों और पाठ की तरह है, बस तालिका के चारों ओर एक div जोड़ें, उस div की चौड़ाई और ऊंचाई निर्धारित करें, और अतिप्रवाह संपत्ति जोड़ें:

... 

जब आप ऐसा करते हैं तो एक चीज होती है एक क्षैतिज स्क्रॉल बार आमतौर पर प्रकट होता है क्योंकि ब्राउज़र मानता है कि स्क्रॉल बार का क्रोम तालिका को ओवरलैप कर रहा है। तालिका की चौड़ाई और अन्य को बदलने से इसे ठीक करने के कई तरीके हैं। लेकिन हमारा पसंदीदा सीएसएस 3 संपत्ति के साथ क्षैतिज स्क्रॉलिंग को बंद करना है अतिप्रवाह-x

बस जोड़ दो अतिप्रवाह-एक्स: छिपा हुआ; div के लिए, और वह क्षैतिज स्क्रॉल बार को हटा देगा। इसका परीक्षण करना सुनिश्चित करें, क्योंकि ऐसी सामग्री हो सकती है जो गायब हो जाए।

फ़ायरफ़ॉक्स ओवरफ्लो के लिए TBODY टैग का उपयोग करने का समर्थन करता है

फ़ायरफ़ॉक्स ब्राउज़र की एक बहुत अच्छी विशेषता यह है कि आप इनर टेबल टैग जैसे tbody और thead या tfoot पर ओवरफ्लो प्रॉपर्टी का उपयोग कर सकते हैं। इसका मतलब है कि आप टेबल सामग्री पर स्क्रॉल बार सेट कर सकते हैं, और हेडर सेल उनके ऊपर एंकर रहते हैं। यह केवल फ़ायरफ़ॉक्स में काम करता है, जो बहुत खराब है, लेकिन यह एक अच्छी सुविधा है यदि आपके पाठक केवल फ़ायरफ़ॉक्स का उपयोग करते हैं। मेरा क्या मतलब है यह देखने के लिए फ़ायरफ़ॉक्स में इस उदाहरण को ब्राउज़ करें।

...नामफोनजेनिफर502-5366. 

...