Quick Reach
How to use the jQuery scroll method?
The scroll event happens when a browser window is scrolled. Scroll event also occurs when scrollable elements like textarea is scrolled. As scroll event occurs, scroll() method of jQuery is used to perform desired actions.
Syntax of using the scroll method
$(selector).scroll(function)
Where selector can be a window or scrollable HTML element.
An example of scroll event
The following example shows how scroll event is captured and alert is shown when the browser window is scrolled.
Fill appropriate text to bring scroll bars in your testing HTML page in paragraphs.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
alert (“Scroll event occured!”);
});
});
</script>
</head>
<body>
<p>Text to bring scroll bars! Text to bring scroll bars! Text to bring scroll bars! Text to bring scroll bars! <br /><br />
Text to bring scroll bars! Text to bring scroll bars! <br /><br />
</p>
</body>
</html>
|
Example with a textarea
In this example, the scroll jQuery method is used with the textarea. For the demo purpose, we filled the text area and kept the size smaller so that the scroll bar appears. As you scroll down or up in text area, the alert will display. The alert code is placed inside the scroll method:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(txtscroll).scroll(function(){
alert (“Scroll event occured!”);
});
});
</script>
</head>
<body>
<textarea cols=“20” rows=“10” id=“txtscroll”>
Text to bring scroll bars! Text to bring scroll bars!
Text to bring scroll bars! Text to bring scroll bars!
</textarea>
</body>
</html>
|
Read also: jQuery scroll to element
Leave A Comment?