Phonegap scrollbar?

Question

I am new to Phonegap. I am showing a list of data as a list. Data is being collected from the server, and I want to add a scroll bar to the view. How to add a scroll bar to Phonegap and make the view scroll sticky? Joe, to make it smooth? Please help me do this.

Thanks in advance.

Answer 1

I personally don’t like iscroll .. there were a lot of problems with this, so I found another solution ... you can try this:

1.) set the DIV overflow to auto (or scroll) and set its height. For example,

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

(I usually calculate the height using javascript based on the user's screen size. I never set a fixed height for all devices, it's just for this “demonstration”).

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 the page load .. if you use jQuery:

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

4.) If you want your scrollbars to be visible, simply define the following CSS rules:

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

this has been tested and should work just the same on any Android (even older models) or iOS device (which also works without this workaround), but this workaround will not break it. You can combine this with position: fixed or position: an absolute wrapper element ...

You can also play with the touchScroll function, you can add some easing or even recognition using auto scroll, etc., but this is a bit more complicated problem ...

Answer 2

Use iscroll .

Steps

 function loaded() { document.addEventListener('touchmove', function(e){ e.preventDefault(); }); myScroll = new iScroll('scroller'); } document.addEventListener('DOMContentLoaded', loaded);` <div id="wrapper"> <div id="scroller"> <ul> <li>...</li> </ul> </div> 

#wrapper also needs some classes:

 #wrapper { position:relative; z-index:1; width:/* your desired width, auto and 100% are fine */; height:/* element height */; overflow:/* hidden|auto|scroll */; } 

In this example, demo