ARTICLE

JQuery Scroll Event method using Visual Studio 2010

Posted by Sapna in Articles | ASP.NET using VB.NET on February 17, 2011

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.

Tweet
1575
0

Download Files:

JQueryScroll.zip

Reader Level: Beginner

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