Scroll bar in Phonegap?

Question

I am new to Phonegap. I am displaying a list of data in a list view. The data is collected from a server and I want to add a scroll bar to the view. How to add a scroll bar in Phonegap and make the view scrolling sticky? Jow to make it smooth? Please guide me to do this.

Thanks in advance.

Answer 1

personally I don't like iscroll.. had many problems using it so I discovered another solution... you can try this:

1.) set your DIV overflow to auto (or scroll) and set its height.. e.g.

    <div id="wrapper" style="overflow:auto; height: 200px">...content...</div>

(I usually calculate height with javascript based on user's screen size.. I never set just a fixed height for all devices, this is just for the purpose of this "demo")

2.) add this javascript:

<script>
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

function touchScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollTop+event.touches[0].pageY;
            event.preventDefault();
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollTop=scrollStartPos-event.touches[0].pageY;
            event.preventDefault();
        },false);
}
} 
</script>

3.) call it on page load.. if you use jQuery:

$(document).ready(function() { 
   touchScroll("wrapper");
});

4.) if you want your scrollbars to be visible, just define following CSS rules:

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #000;
} 

this was tested and should work exactly the same on any Android (even older models) or iOS device (which works also without this workaround - but this workaround won't break it). You can combine this with position:fixed or position:absolute of the wrapper element...

You can also play around with touchScroll function, you can add some easing or even swipe detection with auto scroll etc. but this is a bit more advanced issue...