CODEWITHSUNDEEP
javascriptandroidhtmlcordova
Anildhara
Anildhara

Reputation: 197

How to add Scroller in html5, Android, Phonegap

I have several section in my html page where some sections are dynamically generated by JS. In some section I need scrolling so that other section would not scroll, but only tapped section should scroll. Currently all section/page is scrolling.

I tried iScroll , but not working for Android, Phonegap

Any suggestion.

Upvotes: 1

Views: 578

Answers (1)

j99
j99

Reputation: 285

try this:

1.) set your DIV overflow to auto.. e.g.

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

2.) add this 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.) call it on page load.. if you use jQuery:

$(document).ready(function() { 
   touchScroll("wrapper");
});

4.) if you want your scrollbars to be visible, just define following CSS rules:

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #000;
}

this was tested and should work on any Android or iOS device. You can combine this with position:fixed and/or position:absolute css rules

Upvotes: 4

Related Questions