javascript - html5、Android、PhonegapでScrollerを追加する方法

Question

私のhtmlページにはいくつかのセクションがあり、いくつかのセクションはJSによって動的に生成されます。一部のセクションでは、他のセクションがスクロールしないようにスクロールする必要がありますが、タップしたセクションのみがスクロールする必要があります。現在、すべてのセクション/ページがスクロールしています。

iScrollを試しましたが、Android、Phonegapでは機能しません

なにか提案を。

Answer 1

これを試して：

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 ルールと組み合わせることができます