Problem

Simple thing as scrolling a div with overflow:auto is currently not possible on the Android platform.
Due to my application requirement I really needed this functionality so here is what I come up with

Challenges

Currently when we call node.offsetHeight we will not get the full height of the div only the content visible
to fix that I change the positioning to absolute and height 100% to get the true height of the div.

Android project with scrollable div can be download here

Code

Code consist of three parts

• CSS
• JavaScript
• HTML markup

 /**
		 * WebKit Div Scroller class
		 * @author:Greg Bugaj
		 * Initial release
		 */
		 //Namespace
		var GB=GB || {};
		GB.Scroller=
		{
			SCROLL_INREMENT:5,//Amount to scroll per update
			SCROLL_TIME:75,//Time between update Intervals in  MS	
			
			getElementsByClassName:function(classname, node)  {
				if (!node) {
					node = document.getElementsByTagName('BODY')[0];
				}
				var a = [];
				var re = new RegExp('\\b' + classname + '\\b');
				var els = node.getElementsByTagName("*");
				for(var i=0,j=els.length; i=  contentHeight)){
							cancelTimer=true;
						}
						if(cancelTimer){
							clearInterval(iTimer);
							return;
						}						
						t+=GB.Scroller.SCROLL_INREMENT*direction;
						scroller.style.top=t+"px";				
					};
					
					
					//Attach events to navigation 
					var tapUP = GB.Scroller.getElementsByClassName("scroll_up", scroller_container);
					if(tapUP==null){
						alert("There is no DIV with class 'scroll_up'");
					}
					tapUP=tapUP[0];//There should be only 1 element in the array
					
					var tapDOWN = GB.Scroller.getElementsByClassName("scroll_down", scroller_container);
					if(tapDOWN==null){
						alert("There is no DIV with class 'scroll_down'");
					}
					tapDOWN=tapDOWN[0];//There should be only 1 element in the array
					
						
					tapUP.addEventListener('touchstart', function(e){
						iTimer=setInterval(function(){ scrollContent(e, -1);}, GB.Scroller.SCROLL_TIME);
					}, false);
					
					tapUP.addEventListener('touchend', function(e){
						clearInterval(iTimer);
					}, false);
					
					tapDOWN.addEventListener('touchstart', function(e){
							iTimer=setInterval(function(){scrollContent(e, 1);}, GB.Scroller.SCROLL_TIME);
					}, false);
					
					tapDOWN.addEventListener('touchend', function(e){
						clearInterval(iTimer);
					}, false);
					
				}//for
			}//function
		};
		
		//Initialize all the scrollable components on the page
		window.addEventListener('load', function(){ GB.Scroller.init(); }, true);

   

        
 
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec dapibus ipsum in nulla rhoncus a blandit enim lobortis. Mauris scelerisque justo eu purus molestie ut sodales diam laoreet. Integer id volutpat urna. Sed lacinia risus id magna pharetra scelerisque. Proin venenatis blandit sapien vitae pulvinar. Nulla et urna in erat venenatis posuere eu id ipsum. Proin magna mi, congue ultrices malesuada id, sollicitudin a urna. Praesent id lorem leo. Phasellus vestibulum dapibus mattis. Fusce et faucibus risus.  
     Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec dapibus ipsum in nulla rhoncus a blandit enim lobortis. Mauris scelerisque justo eu purus molestie ut sodales diam laoreet. Integer id volutpat urna. Sed lacinia risus id magna pharetra scelerisque. Proin venenatis blandit sapien vitae pulvinar. Nulla et urna in erat venenatis posuere eu id ipsum. Proin magna mi, congue ultrices malesuada id, sollicitudin a urna. Praesent id lorem leo. Phasellus vestibulum dapibus mattis. Fusce et faucibus risus.     

     
	

		

			
		
		
		
 
		
		

			
		
	
  
      
    

Feature request/updates

I will add features as I need them or upon request.