When you scroll, the jQuery Mobile framework fires the scrollstart event. When you stop scrolling the scrollstop
event is triggered. This recipe shows you how to use these two events.
Copy the full code of this recipe from the code/08/scroll
sources folder. You can launch this code by using the URL http://localhost:8080/08/scroll/main.html
Carry out the following steps:
Create
main.html
with the page contentdiv
styled with a large value for its height, so that the scroll bars appear:<div id="main" data-role="page" data-theme="e"> <div data-role="header" data-theme="a" data- position="fixed"> <h1>Scroll Events</h1> </div> <div data-role="content"> <div style="height: 1000px">Scroll now</div> </div> </div>
Add the following script to the
<head>
section to handle thescroll
events:$(window).bind("scrollstart", function(event) { $("h1").html("Scrolling now...