如何在html5,Android,Phonegap中添加滚动条

时间:2012-08-23 05:30:48

标签: javascript android html5 cordova

我的html页面中有几个部分,其中一些部分是由JS动态生成的。 在某些部分我需要滚动,以便其他部分不会滚动,但只有抽头部分应滚动。 目前所有部分/页面都在滚动。

我试过iScroll,但不适用于Android,Phonegap

任何建议。

1 个答案:

答案 0 :(得分:4)

试试这个:

1。)将DIV溢出设置为自动...例如

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

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设备上运行。您可以将其与position:fixed和/或position:absolute css rules

结合使用