onscroll इवेंट

DOM इवेंट Event ऑब्जेक्ट

परिभाषा और उपयोग

onscroll इवेंट जब एलिमेंट का स्क्रोल बार रोल होता है तो होता है。

सूचना:CSS का उपयोग करें overflow साइले मापदंड एलिमेंट के लिए स्क्रोल बार बनाता है。

इंस्टांस

उदाहरण 1

डिव एलिमेंट को रोल करते समय JavaScript चलाने के लिए:

<div onscroll="myFunction()">

अपने आप इसे प्रयोग करें

उदाहरण 2

विभिन्न रोलिंग स्थानों के बीच क्लास नाम बदलना - जब उपयोगकर्ता पृष्ठ के शीर्ष से नीचे 50 पिक्सल तक रोल करता है, क्लास "test" एलिमेंट में जोड़ी जाएगी (फिर से ऊपर की ओर रोल करने पर उसे हटा दिया जाएगा)。

window.onscroll = function() {myFunction()};
function myFunction() {
  document.getElementById("myP").className = "test";
    else {
  }
    document.getElementById("myP").className = "";
  }
}

अपने आप इसे प्रयोग करें

उदाहरण 3

जब यूजर पृष्ठ के शीर्ष से नीचे 350 पिक्सल तक घुमता है तो एलीमेंट (slideUp वर्ग जोड़ें):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

अपने आप इसे प्रयोग करें

व्याकरण

जैसा कि HTML में

<एलीमेंट onscroll="myScript">

अपने आप इसे प्रयोग करें

जैसा कि JavaScript में

ऑब्जेक्ट.onscroll = function(){myScript};

अपने आप इसे प्रयोग करें

जैसा कि JavaScript में, addEventListener() विधि का उपयोग करें

ऑब्जेक्ट.addEventListener("scroll", myScript);

अपने आप इसे प्रयोग करें

टिप्पणीःइंटरनेट एक्सप्लोरर 8 या उससे पुराने संस्करण इसे समर्थित नहीं करते addEventListener() विधि。

तकनीकी विवरण

बुबलिंगः समर्थित नहीं है
रद्द करने योग्यः समर्थित नहीं है
इवेंट क़िस्मः यदि यूजर इंटरफेस से उत्पन्न होता है तोUiEvent। अन्यथा इवेंट。
समर्थित HTML टैगः <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
DOM संस्करण: स्तर 2 इवेंट

ब्राउज़र सापोर्ट

इवेंट च्रोम आईई फायरफॉक्स सैफारी ओपेरा
onscroll सापोर्ट सापोर्ट सापोर्ट सापोर्ट सापोर्ट
DOM इवेंट Event ऑब्जेक्ट