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

How to add Scroller in html5, Android, Phonegap

本文关键字：添加 滚动条 Phonegap Android html5      更新时间：2023-09-26

我的html页面中有几个部分，其中一些部分是由JS动态生成的。在某些部分中，我需要滚动，这样其他部分就不会滚动，但只有点击的部分才能滚动。当前所有部分/页面都在滚动。

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

任何建议。

试试这个：

1.）将DIV溢出设置为auto。。例如

    <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规则

相结合
相关文章：