ऑनस्क्रॉल इवेंट
उदाहरण
जब कोई <div> तत्व स्क्रॉल किया जा रहा हो तो JavaScript निष्पादित करें:
<div onscroll="myFunction()">
परिभाषा और उपयोग
ऑनस्क्रॉल ईवेंट तब होता है जब किसी तत्व की स्क्रॉलबार स्क्रॉल की जा रही होती है।
युक्ति: किसी तत्व के लिए स्क्रॉलबार बनाने के लिए CSS अतिप्रवाह शैली गुण का उपयोग करें।
ब्राउज़र समर्थन
Event | |||||
---|---|---|---|---|---|
onscroll | Yes | Yes | Yes | Yes | Yes |
वाक्य - विन्यास
एचटीएमएल में:
<element onscroll="myScript">
जावास्क्रिप्ट में:
object.onscroll = function(){myScript};
जावास्क्रिप्ट में, addEventListener() विधि का उपयोग करना:
object.addEventListener("scroll", myScript);
नोट: AddEventListener () विधि Internet Explorer 8 और पुराने संस्करणों में समर्थित नहीं है।
टेक्निकल डिटेल
बुलबुले: | नहीं |
---|---|
रद्द करने योग्य: | नहीं |
घटना प्रकार: | UiEvent यदि उपयोगकर्ता इंटरफ़ेस से उत्पन्न होता है, तो ईवेंट अन्यथा |
समर्थित HTML टैग: | <पता>, <ब्लॉकक्वॉट>, <बॉडी>, <कैप्शन>, <सेंटर>, <डीडी>, <डीआईआर>, <div>, <डीएल>, <डीटी>, <फील्डसेट>, <फॉर्म>, <एच 1 > से <h6>, <html>, <li>, <मेनू>, <ऑब्जेक्ट>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <थेड>, <उल> |
डोम संस्करण: | स्तर 2 कार्यक्रम |
और ज्यादा उदाहरण
उदाहरण
विभिन्न स्क्रॉल स्थितियों पर वर्ग नामों के बीच टॉगल करें - जब उपयोगकर्ता पृष्ठ के शीर्ष से 50 पिक्सेल नीचे स्क्रॉल करता है, तो कक्षा का नाम "परीक्षण" एक तत्व में जोड़ा जाएगा (और फिर से स्क्रॉल करने पर हटा दिया जाएगा)।
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
उदाहरण
एक तत्व में स्लाइड करें जब उपयोगकर्ता ने पृष्ठ के शीर्ष से 350 पिक्सेल नीचे स्क्रॉल किया हो (स्लाइडअप वर्ग जोड़ें):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}