Capture scroll event on a particular jQuery Mobile Page

Question

How to capture the scroll event on a particular jQuery Mobile page?

Page

<div id='pg_remote-address-book' data-role='page'>
  <div data-role='content' id='pg_remote-address-book_content'>
    <ul data-role='listview' id='ul_address_list'>
    </ul>
  </div>
</div>

On pagebeforecreate, dynamically loading items inside the unordered list

for ( var i = 0; i < 100; i++ ) {
  $("#ul_address_list").append("<li>"+i+"</li>");
}

Capture Scrolling

$('#pg_remote-address-book').scroll(function () {
  console.log('scrolled');
});

The scroll event is not getting captured. How can I capture that?

If I put 'window' instead of '#pg_remote-address-book' then it is working. But I want to capture the scroll event on a particular page. Can you please help me on this?

Answer 1

Listen to scrollstart or scrollstop events, and use .on to bind events.

$(document).on("scrollstart", function (e) {
  var active = $.mobile.activePage[0].id;
  if (active == "pg_remote-address-book") {
    // Do something
  } else {
    // Do something else
  }
});

Demo