Handling Scroll Events

Contact Us or call 1-877-932-8228
Handling Scroll Events


We can capture the start and finish of user scrolling with the scrollstart and scrollstop events; see the jQuery Mobile docs for more information.

Scroll Events
Event Handler Description
scrollstart Triggers when a scroll begins. Note that iOS devices freeze DOM manipulation during scroll, queuing them to apply when the scroll finishes. jQuery Mobile is currently investigating ways to allow DOM manipulations to apply before a scroll starts.
scrollstop Triggers when a scroll finishes.

In this example, we use jQuery to add a class to the paragraph tags in the body copy when scrolling starts - making the text italic and red - and remove the class when scrolling stops:

scrolling demo

Open Events/Demos/scroll.html in a mobile browser to check this out.

Code Sample:


Code Explanation:

We use $(document).on('scrollstart' and $(document).on('scrollstop' to capture the scrolling start and stop events. We use jQuery's addClass and removeClass methods to add and remove class scrolling (which we created) to the paragraphs of greeking text.