phonegap应用程序中的Android滚动条?

时间:2012-07-05 05:23:35

标签: android jquery html css cordova

我在android phonegap移动网站应用程序中遇到问题,我在我的应用程序中应用滚动条,它在PC上运行良好但是当我在Android设备(手机)滚动条中测试时没有启用。

3 个答案:

答案 0 :(得分:1)

我个人不喜欢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;
} 

答案 1 :(得分:0)

使用此PhoneGap链接

http://phonegap.pbworks.com/w/page/22863184/Hide%20the%20scrollbar%20in%20Android

这适用于Android,PhoneGap应用程序用于垂直和水平滚动

答案 2 :(得分:0)

代码看起来像这样

公共类MyActivity扩展了DroidGap {

@Override
  public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    super.loadUrl("file:///android_asset/www/index.html");

     // Display vertical scrollbar and hide horizontal scrollBar
     super.appView.setVerticalScrollBarEnabled(true);
     super.appView.setHorizontalScrollBarEnabled(false);
    // set scrollbar style
    super.appView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
}

}