Obtenga la posición de desplazamiento del panel utilizando SplitView (jQuery Mobile)

Question

He implementado una aplicación web usando SplitView - http://asyraf9.github.com/jquery-mobile/ - (y eso parece usar el componente ScrollView) junto con JQuery Mobile. Todo funciona bien ...

Dentro del panel, tengo una lista de elementos que deberían agregar dinámicamente elementos al desplazarse llega al final de la lista. En el iPhone no uso SplitView pero Iscroll - http://cubiq.org/iscroll - y el siguiente código para lograr esto (y está funcionando).

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));

Pero cuando uso SplitView, realmente no sé qué evento y qué elemento vincular al oyente o cómo obtener la posición de desplazamiento. Ya probé varias combinaciones, pero no logré buenos resultados. El mejor fue el siguiente:

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

Mi pregunta es: ¿estoy usando el oyente de eventos correctos (ya que ya se dispara? Sin embargo, la animación de desplazamiento aún está en uso) y ¿cómo obtengo la posición de desplazamiento?

Answer 1

No use el complemento ScrollView. su buggy. Use ISCROLL para las aplicaciones de IOS PhoneGAP y Android. Funciona bien en ambos.
Para detectar el desplazamiento y cargar nuevos elementos en la lista, escuche el evento 'Onscrollmove' de Iscroll.
En iscroll-wrapper.js agrega esto-

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

Luego, en su código, adjunte un controlador de eventos al evento OnscrollMove y maneje agregar nuevas filas en eso.
OnscrollMove disparará cada vez que se desplazará.
En el controlador puede encontrar cuántas filas hay en su lista y qué fila está en la parte superior de su puerto de vista usando algo como

 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();
        }
    }
}

Y en la devolución de llamada, agregue el código para agregar nuevas filas. Espero que ayude.