JQuery Scroll Event method using Visual Studio 2010 in VB.NET

Posted in VB.NET | ASP.NET USING VB.NET on November 05, 2019

Tags: JQuery, JQuery Articles, JQuery Events, JQuery Scroll Event Method, JQuery Tutorials, Visual Studio using JQuery

JQuery scroll event plugin method used to scroll events within the specified element in Visual Studio 2010.

2027

JQuery Scroll () event method triggers the scroll event when user scrolls in the specified element and also specifies number of times a scroll event occurs if the function parameter is set.

Statement to count the occurrence of scroll event.

$("div").scroll(function ()
{
$("span").text(x += 1);
});

Let us see an example for catching scroll method in jquery. In the below example we have a small div that moves up and down on user specifications. Following is the source code.

Example

<html>
<head>
<title>JQuery Scroll Event</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    x = 0;
    $(document).ready(function () {
        $("div").scroll(function () {
            $("span").text(x += 1);
        });
    });
</script>
    <style type="text/css">
        .style1
        {
            color: #BC3F3F;
        }
        .style2
        {
            color: #C40000;
        }
        .style3
        {
            color: #000000;
        }
    </style>
</head>
<body bgcolor="#e1e1e1">
<p class="style2" style="font-family: Verdana; font-size: small; font-weight: bold">
     JQuery Event Scroll () Method</p>
   <div style="width:378px; height:219px; overflow:scroll; font-family: Verdana; font-size: small;
      background-color: #FFFFFF;">
     Global warming is the increase in the average temperature of Earth's near-surface air and
     oceans since the mid-20th century and its projected continuation.
   <br /><br />
     It happens when greenhouse gases (carbon dioxide, water vapor, nitrous oxide, and methane)
     trap heat and light from the sun in the earth's atmosphere, which increases the temperature.
     This hurts many people, animals, and plants. Many cannot take the change, so they die.
   </div>
<p class="style3" style="font-family: Verdana; font-size: small">Number of times
     scroll is used for an element:</p>
<p style="font-family: Verdana; font-size: small">Scrolled <span class="style1">
     <strong>0</strong></span> times.</p>
</body>
</html>

Output

JQuery Scroll Event method using Visual Studio 2010 in VB.NET

Related Articles

Categories

More Articles