Get scroll position of panel using SplitView (JQuery Mobile)

Question

I have implemented a WebApp using SplitView - http://asyraf9.github.com/jquery-mobile/ - (and that seems to use the ScrollView component) together with jQuery Mobile. Everything works fine ...

Within the panel I have got a list of elements that should dynamically add elements when scrolling reaches the end of the list. On the iPhone I do not use SplitView but iScroll - http://cubiq.org/iscroll - and the following code to achieve this (and it is working).

HTML:

<div data-role="panel" data-id="menu" data-hash="crumbs" style="z-index: 10000;" id="Panel">
    <div data-role="page" id="Root" class="Login" onscroll="console.log('onscroll');">
        <div data-role="content" data-theme="d" onscroll="console.log('onscroll');">
            <div class="sub">
                <ul data-role="listview" data-theme="d" data-dividertheme="a" class="picListview" id="PortfolioList">
                    <!-- Content added dynamically -->
                </ul>
            </div>
        </div>
    </div>
</div>

Javascript:

var defaultIScrollOptions = { 
    useTransition: true, 
    onScrollStart: function() { 
        this.refresh();
    }, 
    onScrollEnd: function() { 
        if (this.elem && this.id) { 
            possiblyDisplayNextDocuments(this.y, this.elem, this.id); 
         } 
    }
};
iScrolls.push(new iScroll(document.getElementById("searchResults").parentNode, defaultIScrollOptions));

But when using SplitView I do not really know which event and which element to bind the listener on or how to get the scroll position. I already tried several combinations, but did not achieve good results. The best one was the following:

$("#PortfolioList").scrollstop(function(event) {
    console.log("scrollstop: "+$("#PortfolioList").scrollTop());
});

My question is: Am I using the right event listener (since it already fires althgough the scrolling animation is still in use) and how do I get the scroll position?

ghostCoder ghostCoder · Accepted Answer · 2012-02-17T13:57:52

dont use the scrollview plugin. its buggy. Use iscroll for both iOS phonegap apps as well as android. It works fine on both.
For detecting the scroll and loading new elements into the list, listen to the the 'onScrollMove' event of iscroll.
In the iscroll-wrapper.js add this-

 options.onScrollMove = function(){
      that.triggerHandler('onScrollMove', [this]);
    };

then in your code attach a event handler to the onScrollMove event and handle adding new rows in that.
onScrollMove will fire whenever you scroll.
In the handler you can find how many rows are there in your list and that which row is on the top of your view port using something like

 iscrollScrollEventHandler:function(event){
    var contentDiv= $('div:jqmData(id="main") .ui-page-active div[data-role*="content"] ul li' );
    var totalItemsonList =   contentDiv.length;

    var cont =$('div:jqmData(id="main") .ui-page-active div:jqmData(role="content")');

    var itemToScrollOn =  totalItemsonList - x; // x is the item no. from the top u want to scroll on. u need to keep updating i guess
    var docViewBottom = $(cont).scrollTop() + $(cont).height();
    var itemOffset = $(contentDiv[itemToScrollOn]).offset();
    if(itemOffset){
        var elemTop = itemOffset.top;
        if (elemTop <= docViewBottom){
            event.data.callback();
        }
    }
}

and in the callback add the code to add new rows. hope that helps.

Get scroll position of panel using SplitView (JQuery Mobile)

1 Answers