Barra de desplazamiento en Phonegap?

Personalmente no me gusta iscroll .. tuve muchos problemas al usarlo así que descubrí otra solución … puedes probar esto:

1.) establecer su desbordamiento DIV a auto (o desplazarse) y establecer su altura .. por ejemplo

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

(Por lo general, calcular la altura con javascript basado en el tamaño de la pantalla del usuario .. Nunca he fijado una altura fija para todos los dispositivos, esto es sólo para el propósito de esta "demo")

2.) añadir este 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.) llamarlo en carga de página .. si utiliza jQuery:

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

4.) si desea que sus barras de desplazamiento sean visibles, simplemente defina las siguientes reglas CSS:

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

Esto se probó y debería funcionar exactamente igual en cualquier dispositivo Android (incluso modelos anteriores) o iOS (que funciona también sin esta solución, pero esta solución no lo romperá). Puede combinar esto con position: fixed o position: absolute del elemento wrapper …

También puede jugar con la función touchScroll, puede agregar un poco de relajación o incluso la detección de deslizar con desplazamiento automático, etc, pero esto es un problema un poco más avanzado …

Utilice iscroll .

Pasos

 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> 

El #wrapper también necesita algunas clases:

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

Ver esta demostración de ejemplo