Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

HTML ऑनस्क्रॉल ईवेंट विशेषता

<घंटा/>

HTML दस्तावेज़ में स्क्रॉलबार का उपयोग करके HTML तत्व को स्क्रॉल करने पर HTML ऑनस्क्रॉल ईवेंट विशेषता ट्रिगर होती है।

सिंटैक्स

निम्नलिखित वाक्य रचना है -

<tagname onscroll=”script”></tagname>

आइए हम HTML ऑनस्क्रॉल ईवेंट विशेषता का एक उदाहरण देखें -

उदाहरण

<!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 Event Attribute Demo</h1>
<p onscroll="scrollFn()" class="box-para">
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text. This is a paragraph element with some dummy text. 
This is a paragraph element with some dummy text.</p>
<p>Scroll above paragraph text to increase its font size</p>
<script>
   function scrollFn() {
      document.querySelector(".box-para").style.fontSize = "1.5rem";
   }
</script>
</body>
</html>

आउटपुट

HTML ऑनस्क्रॉल ईवेंट विशेषता

यह देखने के लिए कि ऑनस्क्रॉल ईवेंट विशेषता कैसे काम करती है, पैराग्राफ़ की सामग्री में स्क्रॉल करें -

HTML ऑनस्क्रॉल ईवेंट विशेषता


  1. HTML ondragstart ईवेंट विशेषता

    HTML ondragstart ईवेंट विशेषता तब ट्रिगर होती है जब उपयोगकर्ता HTML दस्तावेज़ में किसी HTML तत्व या किसी तत्व के टेक्स्ट को खींचना शुरू करता है। सिंटैक्स निम्नलिखित वाक्य रचना है - <tagname ondragstart=”script”></tagname> आइए HTML ondragstart ईवेंट विशेषता का एक उदाहरण देखे

  1. HTML ऑनड्रॉप इवेंट विशेषता

    HTML ऑनड्रॉप ईवेंट विशेषता तब ट्रिगर होती है जब किसी HTML दस्तावेज़ में ड्रैग करने योग्य तत्व या टेक्स्ट को किसी मान्य ड्रॉप लक्ष्य पर छोड़ दिया जाता है। सिंटैक्स निम्नलिखित वाक्य रचना है - <tagname ondrop=”script”></tagname> आइए एचटीएमएल ऑनड्रॉप इवेंट एट्रीब्यूट— . का एक उ

  1. HTML ondragleave घटना विशेषता

    HTML ondragleave ईवेंट विशेषता तब ट्रिगर होती है जब कोई ड्रैग करने योग्य तत्व या टेक्स्ट किसी HTML दस्तावेज़ में एक मान्य ड्रॉप लक्ष्य से बाहर निकलता है। सिंटैक्स निम्नलिखित वाक्य रचना है - <tagname ondragleave=”script”></tagname> आइए एचटीएमएल ऑनड्रैगलेव इवेंट एट्रीब्यूट- .