वेब पेजों के माध्यम से सर्फ करते समय, किसी तत्व पर स्क्रॉल करने से उपयोगकर्ता का ध्यान लंबे समय तक खींचकर केंद्रित रहता है। यह कार्यक्षमता तब लागू की जा सकती है जब उपयोगकर्ता को केवल एक क्लिक का उपयोग करके स्क्रॉल करने की आवश्यकता होती है या, स्वचालन परीक्षण के मामले में, पृष्ठ के निचले भाग में अतिरिक्त सामग्री की तुरंत जांच करने के लिए। ऐसे परिदृश्यों में, जावास्क्रिप्ट में किसी तत्व पर स्क्रॉल करने से कार्यक्षमता जुड़ जाती है जिसे बिना अधिक उपयोगकर्ता सहभागिता के एक क्लिक के साथ लागू किया जा सकता है और समय की बचत होती है।
यह मैनुअल आपको जावास्क्रिप्ट का उपयोग करके किसी तत्व तक स्क्रॉल करने के लिए मार्गदर्शन करेगा।
जावास्क्रिप्ट का उपयोग करके किसी तत्व पर स्क्रॉल कैसे करें?
जावास्क्रिप्ट का उपयोग करके किसी तत्व तक स्क्रॉल करने के लिए, आप इसका उपयोग कर सकते हैं:
-
- ' देखने के लिए स्क्रॉल करें() ' तरीका
- ' स्क्रॉल () ' तरीका
- ' स्क्रॉल करने के लिए () ' तरीका
उल्लिखित दृष्टिकोणों को एक-एक करके सचित्र किया जाएगा!
विधि 1: जावास्क्रिप्ट में किसी तत्व तक स्क्रॉल करें स्क्रॉलइन्टोव्यू () विधि का उपयोग कर
' देखने के लिए स्क्रॉल करें() 'विधि दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम) के दृश्य क्षेत्र में एक तत्व को स्क्रॉल करती है। इस विधि को निर्दिष्ट HTML प्राप्त करने के लिए लागू किया जा सकता है और ऑनक्लिक ईवेंट की सहायता से उस पर विशेष विधि लागू की जा सकती है।
वाक्य - विन्यास
Element.scrollIntoView ( संरेखित )
दिए गए सिंटैक्स में, ' संरेखित 'संरेखण प्रकार को इंगित करता है।
उदाहरण
निम्नलिखित उदाहरण में, 'का उपयोग करके निम्नलिखित शीर्षक जोड़ें' ' उपनाम:
< एच 2 > तत्व तक स्क्रॉल करने के लिए बटन पर क्लिक करें। एच 2 >
अब, 'के साथ एक बटन बनाएं क्लिक पर 'समारोह का आह्वान करने वाली घटना' स्क्रॉल एलिमेंट () :
< बीआर >
उसके बाद, स्क्रॉल करने के लिए छवि स्रोत और उसकी आईडी निर्दिष्ट करें:
अंत में, 'नामक एक फ़ंक्शन को परिभाषित करें' स्क्रॉल एलिमेंट () 'जो' का उपयोग करके आवश्यक तत्व लाएगा document.getElementById () 'विधि और छवि को स्क्रॉल करने के लिए उस पर scrollIntoView() विधि लागू करें:
वर तत्व = document.getElementById ( 'डिव' ) ;
Element.scrollIntoView ( ) ;
}
सीएसएस कोड
CSS कोड में, इमेज आईडी का संदर्भ देकर इमेज के आकार को समायोजित करने के लिए निम्नलिखित आयामों को लागू करें “ डिव ':
#दिव{ऊंचाई: 800px;
चौड़ाई: 1200px;
अतिप्रवाह: ऑटो;
}
संबंधित आउटपुट होगा:
विधि 2: विंडो का उपयोग करके जावास्क्रिप्ट में एक तत्व पर स्क्रॉल करें। स्क्रॉल () विधि
' विंडो.स्क्रॉल () 'विधि दस्तावेज़ में समन्वय मानों के अनुसार विंडो को स्क्रॉल करती है। इस विधि को छवि आईडी लाने, फ़ंक्शन का उपयोग करके इसके निर्देशांक सेट करने और निर्दिष्ट छवि को स्क्रॉल करने के लिए कार्यान्वित किया जा सकता है।
वाक्य - विन्यास
विंडो.स्क्रॉल ( एक्स-समन्वय, वाई-समन्वय )
उपरोक्त वाक्य रचना में, ' एक्स-समन्वय 'एक्स निर्देशांक को संदर्भित करता है, और' वाई-समन्वय 'Y निर्देशांक इंगित करता है।
निम्नलिखित उदाहरण घोषित अवधारणा की व्याख्या करता है।
उदाहरण
शीर्षक जोड़ने के लिए समान चरणों को दोहराएं, एक बटन बनाएं, ऑनक्लिक ईवेंट लागू करें और छवि स्रोत को उसकी आईडी के साथ निर्दिष्ट करें:
< एच 2 > तत्व तक स्क्रॉल करने के लिए बटन पर क्लिक करें। एच 2 >< बटन क्लिक पर = 'स्क्रॉल एलिमेंट ()' > स्क्रॉल तत्व बटन >
< बीआर >
< छवि एसआरसी = 'छवि। पीएनजी' पहचान = 'डिव' >
इसके बाद, 'नामक एक फ़ंक्शन को परिभाषित करें' स्क्रॉल एलिमेंट () ' यहां, हम 'का उपयोग करके निर्देशांक समायोजित करेंगे' विंडो.स्क्रॉल () 'नाम के फ़ंक्शन तक पहुँचने की विधि' स्थान() ' और इसे प्राप्त छवि तत्व पर लागू करना:
विंडो.स्क्रॉल ( 0 , स्थान ( document.getElementById ( 'डिव' ) ) ) ;
}
उसके बाद, 'नामक एक फ़ंक्शन को परिभाषित करें' स्थान() एक चर obj को इसके तर्क के रूप में लेते हुए। इसके अलावा, 'लागू करें' ऑफसेट पेरेंट ' संपत्ति, जो निकटतम पूर्वज तक पहुंच जाएगी जिसमें स्थिर स्थिति नहीं है और इसे वापस कर दें। फिर, 'की मदद से आरंभिक वर्तमान शीर्ष मूल्य में वृद्धि करें' ऑफसेटटॉप 'संपत्ति जो माता-पिता (ऑफसेट माता-पिता) के संबंध में शीर्ष स्थान लौटाएगी और मूल्य लौटाएगी' वर्तमान शीर्ष 'जब अतिरिक्त शर्त का मूल्यांकन सत्य के रूप में किया जाता है:
जहां करंटटॉप = 0 ;
यदि ( obj.offsetअभिभावक ) {
करना {
करंटटॉप += obj.offsetTop;
} जबकि ( ( obj = obj.offsetParent ) ) ;
वापसी [ करंटटॉप ] ;
}
}
अंत में, अपनी आवश्यकताओं के अनुसार बनाए गए कंटेनर को स्टाइल करें:
ऊंचाई: 1000 पीएक्स;
चौड़ाई: 1000 पीएक्स;
अतिप्रवाह: ऑटो;
}
उत्पादन
विधि 3: स्क्रॉलटो () विधि का उपयोग करके जावास्क्रिप्ट में एक तत्व तक स्क्रॉल करें
' स्क्रॉल करने के लिए () 'विधि निर्दिष्ट दस्तावेज़ को निर्दिष्ट निर्देशांक पर स्क्रॉल करती है। इस विधि को इसी तरह से अपनी आईडी का उपयोग करके तत्व प्राप्त करने के लिए लागू किया जा सकता है और डीओएम पर विशेष छवि को स्क्रॉल करने के लिए आवश्यक कार्यक्षमता का प्रदर्शन किया जा सकता है।
वाक्य - विन्यास
window.scrollTo ( एक्स और वाई )
यहां, ' एक्स ' तथा ' यू 'x और y निर्देशांक को इंगित करें।
निम्नलिखित उदाहरण पर एक नजर डालें।
उदाहरण
सबसे पहले, एक शीर्षक जोड़ने के लिए ऊपर चर्चा किए गए चरणों को दोहराएं, एक ऑनक्लिक घटना के साथ बटन, और छवि निम्नानुसार है:
< एच 2 > तत्व तक स्क्रॉल करने के लिए बटन पर क्लिक करें। एच 2 >< बटन क्लिक पर = 'स्क्रॉल एलिमेंट ()' > स्क्रॉल तत्व बटन >
< बीआर >
< आईएमजी एसआरसी = 'छवि। जेपीजी' पहचान = 'डिव' >
इसके बाद, 'नामक एक फ़ंक्शन को परिभाषित करें' स्क्रॉल एलिमेंट () ” और स्क्रॉल करने के लिए () विधि में स्थिति () विधि को लागू करके स्क्रॉल सेट करें:
window.scrollTo ( 0 , स्थान ( document.getElementById ( 'डिव' ) ) ) ;
}
अंत में, स्थिति () नामक एक फ़ंक्शन को परिभाषित करें और इसी तरह निर्दिष्ट छवि के निर्देशांक सेट करने के लिए उपरोक्त चर्चा किए गए चरणों को लागू करें:
जहां करंटटॉप = 0 ;
यदि ( obj.offsetअभिभावक ) {
करना {
करंटटॉप += obj.offsetTop;
} जबकि ( ( obj = obj.offsetParent ) ) ;
वापसी [ करंटटॉप ] ;
}
}
उत्पादन
हमने जावास्क्रिप्ट का उपयोग करके किसी तत्व तक स्क्रॉल करने के सभी सुविधाजनक तरीकों पर चर्चा की है।
निष्कर्ष
जावास्क्रिप्ट में किसी तत्व तक स्क्रॉल करने के लिए, “का उपयोग करें” देखने के लिए स्क्रॉल करें() 'तत्व तक पहुँचने और निर्दिष्ट कार्यक्षमता को लागू करने की विधि,' विंडो.स्क्रॉल () 'तत्व लाने के लिए विधि, फ़ंक्शन का उपयोग करके इसके निर्देशांक सेट करें, और छवि को स्क्रॉल करें, या' का उपयोग करें स्क्रॉल करने के लिए () 'तत्व लाने और उसके अनुसार स्क्रॉल करने के लिए विधि। इस ब्लॉग ने जावास्क्रिप्ट का उपयोग करके किसी तत्व तक स्क्रॉल करने की अवधारणा का प्रदर्शन किया।