如何在html5，Android，Phonegap中添加Scroller

Question

我的html頁面中有幾個部分，其中一些部分是由JS動態生成的。 在某些部分我需要滾動，以便其他部分不會滾動，但只有抽頭部分應滾動。 目前所有部分/頁面都在滾動。

我試過iScroll，但不適用於Android，Phonegap

任何建議。

Answer 1

嘗試這個：

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結合使用