Obtenez position du défilement panneau à l'aide SPLITVIEW (JQuery Mobile)

Question

J'ai mis en place un WebApp en utilisant SPLITVIEW - http://asyraf9.github.com/jquery-mobile / - (et qui semble utiliser le composant ScrollView) conjointement avec jQuery mobile. Tout fonctionne très bien ...

Dans le panneau, j'ai une liste d'éléments qui devraient ajouter dynamiquement des éléments lors du défilement atteint la fin de la liste. Sur l'iPhone, je ne pas utiliser SPLITVIEW mais iScroll - http://cubiq.org/iscroll - et le code suivant pour y parvenir (et travaille).

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

Mais lorsque vous utilisez SPLITVIEW je ne sais pas vraiment quel événement et quel élément pour lier l'auditeur ou comment obtenir la position de défilement. Je l'ai déjà essayé plusieurs combinaisons, mais ne pas obtenir de bons résultats. Le meilleur était le suivant:

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

Ma question est: Suis-je utiliser l'écouteur d'événement (depuis déjà des feux althgough l'animation de défilement est toujours en cours d'utilisation) et comment puis-je obtenir la position de défilement

Answer 1

utiliser le plugin Do not scrollview. son buggy. Utilisez iScroll pour les applications iOS PhoneGap ainsi que Android. Il fonctionne très bien sur les deux.
Pour détecter le défilement et le chargement de nouveaux éléments dans la liste, écoutez le cas « onScrollMove » de iScroll.
Dans les iScroll-wrapper.js add this -

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

puis dans votre code joindre un gestionnaire d'événements à l'événement onScrollMove et gérer l'ajout de nouvelles lignes qui.
onScrollMove se déclenche chaque fois que vous faites défiler.
Dans le gestionnaire vous pouvez trouver le nombre de lignes sont là dans votre liste et ce qui est rangée sur le dessus de votre port vue en utilisant quelque chose comme

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

et dans le rappel ajoutez le code pour ajouter de nouvelles lignes. l'espoir qui aide.