सामग्री को अतिप्रवाह से कैसे रोकें और CSS का उपयोग करके स्क्रॉलिंग को सक्षम करें?

यह आलेख सामग्री को अतिप्रवाह से रोकने और सीएसएस का उपयोग करके स्क्रॉलिंग को सक्षम करने की विधि का प्रदर्शन करता है।

कंटेंट ओवरफ्लोइंग को कैसे रोकें और स्क्रॉलिंग को सक्षम करें?

सामग्री को ओवरफ्लो होने से रोकने का उद्देश्य यह है कि सामग्री उसके कंटेनर में फिट हो जाए और वेबसाइट के प्रदर्शन पर नकारात्मक प्रभाव न पड़े। यह संदर्भ को आसानी से समझ सकता है और उपयोगकर्ताओं के अंत तक पहुंच में सुधार कर सकता है। विस्तृत व्याख्या के लिए आइए एक उदाहरण के माध्यम से चर्चा करें:

चरण 1: सामग्री अतिप्रवाह के साथ स्क्रॉलिंग को सक्षम करें
प्रारंभ में, HTML फ़ाइल के अंदर एक टेबल बनाकर शुरू करें, जिस पर स्क्रॉलिंग प्रभाव लागू होगा। मान लेते हैं, तालिका पहले से ही बनाई गई है, और इसमें छह पंक्तियाँ और सात स्तंभ हैं, और तालिका में कुछ डमी डेटा प्रदान किया गया है:

उपरोक्त कोड स्निपेट के निष्पादन के बाद, वेबपेज इस तरह दिखाई देता है:

आउटपुट प्रदर्शित करता है कि तालिका डेटा कम पठनीय प्रारूप में है और तालिका द्वारा बहुत अधिक स्थान प्राप्त कर लिया गया है।

चरण 2: अतिप्रवाह और स्क्रॉलिंग प्रभाव सेट करना
उसके बाद, तालिका को माता-पिता से लपेटें ' <दिव> 'टैग करें और इसे' का एक वर्ग असाइन करें अतिप्रवाह ”। फिर, निम्नलिखित सीएसएस गुणों को उस div तत्व को असाइन करें:

उपरोक्त कोड स्निपेट में:

• सबसे पहले, “200px” का मान दोनों CSS के लिए प्रदान किया गया है “ चौड़ाई ' और ' ऊंचाई ' गुण। यह वेबपेज पर प्रदर्शित होने वाली तालिका का आकार निर्धारित करता है।
• अगला, 'का उपयोग करें अतिप्रवाह-x ' और ' अतिप्रवाह-y स्क्रॉलिंग को सक्षम करने और 'सेट करने के लिए गुण' ऑटो 'मान X और Y-अक्ष के लिए।
• अंत में, का मान सेट करें ' चिकना ' को ' स्क्रॉल व्यवहार ” एक सहज उपयोगकर्ता अनुभव प्रदान करने के लिए।

उपरोक्त कोड स्निपेट के निष्पादन के बाद, वेबपेज इस तरह दिखाई देता है:

वेबपेज दिखाता है कि तालिका अब कम जगह ले रही है और सामग्री को ओवरफ्लो होने से रोक रही है। इसके अलावा, स्क्रॉलिंग प्रभाव को सक्षम किया गया है।

टिप्पणी : व्यवस्थित करके ' अतिप्रवाह: ऑटो ' या ' अतिप्रवाह: स्क्रॉल करें ”, उपयोगकर्ता अतिप्रवाहित सामग्री के लिए स्क्रॉलिंग को सक्षम कर सकते हैं। इसके साथ में ' ओवर फलो हिडेन ” का उपयोग अतिप्रवाह को पूरी तरह से रोकने के लिए किया जा सकता है।

निष्कर्ष

'अतिप्रवाह-एक्स' और 'अतिप्रवाह-वाई' गुणों का उपयोग अतिप्रवाह को नियंत्रित करने और क्षैतिज और ऊर्ध्वाधर अक्ष पर स्क्रॉल करने में सक्षम करने के लिए किया जाता है। यह सामग्री को अतिप्रवाह से रोकता है और स्क्रॉलिंग को सभी उपकरणों के लिए एक इंटरैक्टिव उत्तरदायी डिज़ाइन बनाने में सक्षम बनाता है। इस लेख ने प्रदर्शित किया है कि सामग्री को अतिप्रवाह से कैसे रोका जाए और CSS का उपयोग करके स्क्रॉलिंग को कैसे सक्षम किया जाए।