Android Phonegap中的滚动条?

Android Phonegap中的滚动条?,android,cordova,Android,Cordova,我对Phonegap不熟悉。我正在列表视图中显示数据列表。数据是从服务器收集的,我想在视图中添加一个滚动条。如何在Phonegap中添加滚动条,并使视图滚动保持粘性?你想把它弄光滑吗?请引导我做这件事 提前感谢。使用 台阶 function loaded() { document.addEventListener('touchmove', function(e){ e.preventDefault(); }); myScroll = new iScroll('scroller'); }

我对Phonegap不熟悉。我正在列表视图中显示数据列表。数据是从服务器收集的,我想在视图中添加一个滚动条。如何在Phonegap中添加滚动条,并使视图滚动保持粘性?你想把它弄光滑吗?请引导我做这件事

提前感谢。

使用

台阶

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> 

检查一下这个例子

我个人不喜欢iscroll。。使用它有很多问题,所以我发现了另一个解决方案。。。您可以尝试以下方法:

1.)将DIV overflow设置为自动(或滚动)并设置其高度。。e、 g

    <div id="wrapper" style="overflow:auto; height: 200px">...content...</div>
4.)如果希望滚动条可见,只需定义以下CSS规则:

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

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

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #000;
} 
这是经过测试的,在任何Android(甚至更早的型号)或iOS设备上都应该完全一样(没有这个变通方法也可以工作,但这个变通方法不会破坏它)。您可以将其与包装器元素的position:fixed或position:absolute组合使用


您还可以使用touchScroll功能,您可以使用自动滚动等功能添加一些轻松甚至滑动检测。但这是一个更高级的问题…

将iscroll.js添加到应用程序中并包含在html中,但没有获得滚动条。您正在使用jquery mobile?!
<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>
$(document).ready(function() { 
   touchScroll("wrapper");
});
::-webkit-scrollbar {
  width: 10px;
}

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

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