HTML onscroll इवेंट एट्रिब्यूट

विवरण

HTML onscroll इवेंट एट्रिब्यूट HTML दस्तावेज़ में जब किसी HTML तत्व को उसके स्क्रॉलबार का उपयोग करके स्क्रॉल किया जाता है, तब ट्रिगर होता है।

सिंटैक्स

<tagname onscroll="script"></tagname>

उदाहरण

आइए HTML onscroll इवेंट एट्रिब्यूट का एक उदाहरण देखें:

<!DOCTYPE html> <html> <head> <style> 
  body { 
    color: #000; 
    height: 100vh; 
    background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat; 
    text-align: center; 
    padding: 20px; 
  } 
  .box-para { 
    border: 2px solid #fff; 
    padding: 10px; 
    width: 200px; 
    height: 200px; 
    overflow: scroll; 
    margin: 1rem auto; 
  } 
</style> </head> <body> 
<h1>HTML onscroll इवेंट एट्रिब्यूट डेमो</h1> 
<p onscroll="scrollFn()" class="box-para"> 
  यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। 
  यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। 
  यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। 
  यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। 
  यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। 
  यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। 
  यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। 
  यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। 
  यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। यह कुछ डमी टेक्स्ट के साथ एक पैराग्राफ तत्व है। 
</p> 
<p>ऊपर दिए गए पैराग्राफ टेक्स्ट को स्क्रॉल करके उसका फ़ॉन्ट साइज़ बढ़ाएं</p> 
<script> 
  function scrollFn() { 
    document.querySelector(".box-para").style.fontSize = "1.5rem"; 
  } 
</script> </body> </html>

आउटपुट

HTML onscroll इवेंट एट्रिब्यूट

पैराग्राफ कंटेंट को स्क्रॉल करके देखें कि onscroll इवेंट एट्रिब्यूट कैसे काम करता है:

HTML onscroll इवेंट एट्रिब्यूट