jQuery scroll() Event

The scroll event triggers when mouse pointer is scrolled in the selected element. This is applicable to scroll-able elements only.

Syntax of scroll() Event

$(selector).scroll(function) 

The selector is the element on which scroll event to be occurred. The function is an optional parameter. This function is called when the scroll event fired.

Example

<style>
#scrollframe {
	width: 300px; 
	height: 200px; 
	border: 2px solid black; 
	overflow:scroll;
	padding: 20px;
}
</style>

<div id="scrollframe">
<p class="scrolltxt">
Scroll Here. <br/>
Scroll Here. <br/>Scroll Here. <br/>Scroll Here. <br/>Scroll Here. 
<br/>Scroll Here. <br/>Scroll Here. <br/> Scroll Here. <br/>
Scroll Here. <br/>Scroll Here. <br/>Scroll Here. <br/>Scroll Here. 
</p>
</div>	

<script>
$(document).ready(function(){  
$("#scrollframe").scroll(function(){  
$("p.scrolltxt").css("color", "red");
}); 
});  
</script>

Output of the above code

Scroll Here.
Scroll Here.
Scroll Here.
Scroll Here.
Scroll Here.
Scroll Here.
Scroll Here.
Scroll Here.
Scroll Here.
Scroll Here.
Scroll Here.
Scroll Here.

In the above example, when the user scroll in the div of id 'scrollframe', the text color of paragraph of id 'scrolltxt' changed to 'red'.




Read more articles


General Knowledge



Learn Popular Language