CODEWITHSUNDEEP
jquery-mobile
Nick LaMarca
Nick LaMarca

Reputation: 8188

Capturing Scroll Coordinates Jquery Mobile

I want to append 50 records of data to a listview when a user scrolls to the bottom of the intial set of data. I see there is a scroll event in jquery mobile..

$('div[data-role="page"]').live('pageinit', function (event, ui) {
    var eventsElement = $('#events');
    $(window).bind('scrollstart', function () {
        console.log('start');
        $('.ui-body-c').css('background', 'green');
        eventsElement.append('<li><a href="">Start</a></li>');
        eventsElement.listview('refresh');
    });

Is there a way to use this event or some other event to trigger knowing when the user has scrolled to the end of the intial data?

Upvotes: 0

Views: 180

Answers (1)

Gajotres
Gajotres

Reputation: 57309

I can help you with my older example. But you will need to fix it so it can work with jQM 1.2.

Here's an example: http://jsfiddle.net/Gajotres/v4NxB/. It is far from perfect demo but it can give you enough info to use it correctly.

It uses this jQuery plugin to detect bottom scroll touch: http://imakewebthings.com/jquery-waypoints/#get-started

I have built it with jQM 1.0

This will detect bottom end:

$('#example-offset-pixels').waypoint(function() {
    //notify('100 pixels from the top');
}, { offset: 100 });

EDIT :

This version works with every jQM version, including 1.3 : http://jsfiddle.net/Gajotres/Bn2Du/. It uses pure jQuery, no need for additional frameworks.

Upvotes: 1

Related Questions