Полоса прокрутки в Phonegap?

Я новичок в Phonegap. Я показываю список данных в виде списка. Данные собираются с сервера, и я хочу добавить полосу прокрутки в представление. Как добавить полосу прокрутки в Phonegap и сделать прокрутку вида липкой? Джоу, чтобы сделать его гладким? Пожалуйста, помогите мне сделать это.

Заранее спасибо.

Solutions Collecting From Web of "Полоса прокрутки в Phonegap?"

Лично мне не нравится iscroll .. было много проблем с этим, поэтому я обнаружил другое решение … вы можете попробовать это:

1.) установите переполнение DIV для автоматического (или прокрутки) и установите его высоту .. например

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

(Обычно я вычисляю высоту с помощью javascript на основе размера экрана пользователя. Я никогда не устанавливал фиксированную высоту для всех устройств, это просто для этой «демонстрации»)

2.) добавьте этот 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.) назовите его на загрузку страницы .. если вы используете jQuery:

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

4.) если вы хотите, чтобы ваши полосы прокрутки были видимыми, просто определите следующие правила CSS:

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

Это было протестировано и должно работать точно так же на любом Android (даже более старые модели) или устройстве iOS (которое также работает без этого обходного пути), но это обходное решение не нарушит его). Вы можете комбинировать это с положением: фиксированным или положением: абсолютным элементом обертки …

Вы также можете играть с функцией touchScroll, вы можете добавить некоторое ослабление или даже распознавание проводов с помощью автоматического прокрутки и т. Д., Но это немного более сложная проблема …

Используйте iscroll .

меры

 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 также нуждается в некоторых классах:

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

Проверьте этот пример демонстрации