लंबवत और क्षैतिज स्क्रॉलिंग माउस, टचपैड या उंगली का उपयोग करके वेब पेज को नेविगेट करने के तरीके हैं। वर्टिकल स्क्रॉलिंग का उपयोग तब किया जाता है जब किसी तत्व की सामग्री कंटेनर की ऊंचाई से अधिक हो जाती है। जबकि क्षैतिज स्क्रॉलिंग का उपयोग तब किया जाता है जब किसी तत्व के भीतर की सामग्री कंटेनर की चौड़ाई से अधिक हो जाती है। लंबवत स्क्रॉलिंग उपयोगकर्ताओं को वेब पेज को ऊपर और नीचे ले जाने में सक्षम बनाती है जबकि क्षैतिज स्क्रॉलिंग पृष्ठ को बाएं और दाएं स्थानांतरित करने की अनुमति देती है। टेलविंड सीएसएस वेब पेजों पर लंबवत और क्षैतिज स्क्रॉलिंग को सक्षम करने के लिए उपयोगिता कक्षाएं प्रदान करता है।
यह लेख उदाहरण देगा:
टेलविंड में वर्टिकल स्क्रॉलिंग कैसे सक्षम करें?
टेलविंड में वर्टिकल स्क्रॉलिंग सक्षम करने के लिए, 'का उपयोग करें अतिप्रवाह-वाई-स्क्रॉल HTML प्रोग्राम में वांछित तत्व के साथ उपयोगिता वर्ग। यह ऊर्ध्वाधर स्क्रॉलिंग की अनुमति देता है और हमेशा स्क्रॉलबार दिखाता है जब तक कि उपयोगकर्ता ने अपनी सिस्टम सेटिंग्स में 'हमेशा दृश्यमान' स्क्रॉलबार को अक्षम नहीं किया हो।
वाक्य - विन्यास
< तत्व कक्षा = 'अतिप्रवाह-वाई-स्क्रॉल ...' > ... तत्व >
उदाहरण: लंबवत स्क्रॉलिंग सक्षम करना
इस उदाहरण में, हम एक कॉलम में कुछ फ्लेक्स आइटम के साथ एक फ्लेक्स कंटेनर बनाएंगे और ' लागू करेंगे अतिप्रवाह-वाई-स्क्रॉल 'इसकी उपयोगिता:
< शरीर >
< डिव कक्षा = 'फ्लेक्स फ्लेक्स-कॉल ओवरफ्लो-वाई-स्क्रॉल बीजी-पर्पल-700 पी-4 एमएक्स-14 एमटी-5 एच-36' >
< डिव कक्षा = 'बीजी-पीला-400 पी-2 एम-2' > 1 डिव >
< डिव कक्षा = 'बीजी-पीला-400 पी-2 एम-2' > 2 डिव >
< डिव कक्षा = 'बीजी-पीला-400 पी-2 एम-2' > 3 डिव >
< डिव कक्षा = 'बीजी-पीला-400 पी-2 एम-2' > 4 डिव >
< डिव कक्षा = 'बीजी-पीला-400 पी-2 एम-2' > 5 डिव >
< डिव कक्षा = 'बीजी-पीला-400 पी-2 एम-2' > 6 डिव >
डिव >
शरीर >
यहां, मूल
- “ मोड़ना क्लास का उपयोग लचीला लेआउट बनाकर उपलब्ध स्थान के आधार पर चाइल्ड एलिमेंट के आकार को समायोजित करने के लिए किया जाता है।
- “ फ्लेक्स-कर्नल क्लास कंटेनर की फ्लेक्स-दिशा को एक कॉलम में सेट करता है।
- “ अतिप्रवाह-वाई-स्क्रॉल क्लास वर्टिकल स्क्रॉलिंग को सक्षम बनाता है।
- “ बीजी-बैंगनी-700 क्लास कंटेनर की पृष्ठभूमि पर बैंगनी रंग सेट करता है।
- “ पी 4 क्लास कंटेनर के सभी किनारों पर पैडिंग की 4 इकाइयाँ सेट करता है।
- “ एमएक्स-14 'वर्ग कंटेनर के एक्स-अक्ष पर मार्जिन की 14 इकाइयों को लागू करता है।
- “ एमटी-5 क्लास कंटेनर के शीर्ष पर मार्जिन की 5 इकाइयों को लागू करता है।
- “ एच-36 'वर्ग कंटेनर की ऊंचाई 36 इकाइयों पर सेट करता है।
बच्चे में
- “ बीजी-पीला-400 क्लास ग्रिड आइटम की पृष्ठभूमि को पीले रंग में सेट करता है।
- “ पी 2 क्लास फ्लेक्स आइटम के अंदर सामग्री में पैडिंग की 3 इकाइयाँ जोड़ता है।
- “ एम-2 क्लास फ्लेक्स आइटम के लिए 2 यूनिट मार्जिन सेट करता है।
उत्पादन
उपरोक्त आउटपुट में, यह देखा जा सकता है कि वर्टिकल स्क्रॉलिंग सफलतापूर्वक सक्षम कर दी गई है।
टेलविंड में क्षैतिज स्क्रॉलिंग कैसे सक्षम करें?
टेलविंड में क्षैतिज स्क्रॉलिंग सक्षम करने के लिए, 'का उपयोग करें अतिप्रवाह-एक्स-स्क्रॉल HTML प्रोग्राम में विशिष्ट तत्व के साथ उपयोगिता वर्ग। यह क्षैतिज स्क्रॉलिंग को सक्षम करता है और हमेशा स्क्रॉलबार दिखाता है जब तक कि उपयोगकर्ता ने अपनी सिस्टम सेटिंग्स में 'हमेशा दृश्यमान' स्क्रॉलबार को अक्षम नहीं किया हो।
वाक्य - विन्यास
< तत्व कक्षा = 'अतिप्रवाह-एक्स-स्क्रॉल ...' > ... तत्व >
उदाहरण: क्षैतिज स्क्रॉलिंग सक्षम करना
इस उदाहरण में, हम एक पंक्ति में कुछ फ्लेक्स आइटम के साथ एक फ्लेक्स कंटेनर बनाएंगे और '' लागू करेंगे अतिप्रवाह-एक्स-स्क्रॉल 'इसकी उपयोगिता:
< शरीर >< डिव कक्षा = 'फ्लेक्स फ्लेक्स-रो ओवरफ्लो-एक्स-स्क्रॉल स्पेस-एक्स-24 बीजी-पर्पल-700 पी-4 एमएक्स-14 एमटी-5 एच-36' >
< डिव कक्षा = 'बीजी-पीला-400 पी-2 एम-2' > 1 डिव >
< डिव कक्षा = 'बीजी-पीला-400 पी-2 एम-2' > 2 डिव >
< डिव कक्षा = 'बीजी-पीला-400 पी-2 एम-2' > 3 डिव >
< डिव कक्षा = 'बीजी-पीला-400 पी-2 एम-2' > 4 डिव >
< डिव कक्षा = 'बीजी-पीला-400 पी-2 एम-2' > 5 डिव >
< डिव कक्षा = 'बीजी-पीला-400 पी-2 एम-2' > 6 डिव >
डिव >
शरीर >
यहां पेरेंट
उत्पादन
उपरोक्त आउटपुट इंगित करता है कि क्षैतिज स्क्रॉलिंग सफलतापूर्वक सक्षम कर दी गई है।
निष्कर्ष
टेलविंड में लंबवत और क्षैतिज स्क्रॉलिंग सक्षम करने के लिए, ' अतिप्रवाह-वाई-स्क्रॉल ' और ' अतिप्रवाह-एक्स-स्क्रॉल उपयोगिता वर्गों का क्रमशः उपयोग किया जाता है। ऊर्ध्वाधर और क्षैतिज स्क्रॉलिंग को सक्षम करने और हमेशा स्क्रॉलबार दिखाने के लिए इन उपयोगिताओं को HTML प्रोग्राम में वांछित तत्वों पर लागू किया जाता है। इस आलेख में टेलविंड में ऊर्ध्वाधर और क्षैतिज स्क्रॉलिंग को सक्षम करने की विधि प्रदर्शित की गई है।