HTML में एलिमेंट का स्क्रॉलबार स्क्रॉल होने पर स्क्रिप्ट कैसे चलाएं?

जब किसी एलिमेंट को स्क्रॉल किया जाता है (इसमें स्क्रॉलबार है और उपयोगकर्ता स्क्रॉल करता है), तो onscroll एट्रिब्यूट ट्रिगर होता है। एलिमेंट में overflow: scroll या overflow: auto CSS होना चाहिए।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      #myid { 
        width: 250px; 
        height: 80px; 
        border: 2px solid blue; 
        overflow: scroll; 
      } 
    </style> 
  </head> 
  <body> 
    <p>बॉक्स स्क्रॉल करें।</p> 
    <div id="myid" onscroll="display()">यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। <br><br></div> 
    <script> 
      function display() { 
        document.getElementById("myid").style.color = "blue"; 
      } 
    </script> 
  </body> 
</html>

उपयोग केस: अनंत स्क्रॉल, लेजी लोडिंग, स्क्रॉल-आधारित एनिमेशन, स्टिकी हेडर्स।