Making A Smooth Scroll View For Android & iOS in HTML

Problem: Scroll view achieved using CSS overflow scroll property for android & ios devices are never that smooth as they are in the native way.

Solution: So, to achieve that smoothness, we need to use CSS positioning property as well as css3 -webkit-overflow-scrolling property. let’s see how we can achieve this.

For iOs & Android >= 3.0:

To make a scrollable view, we need to have a wrapper div which should contain the scroller div that contains the content.

Basic HTML:

• ..
• ..
• ..

                  
            
 
      CSS:
 
            #wrapper, #scroller {
                  position: absolute;
                  left: 0;
                  right: 0;
                  margin: 0;
                  padding: 0;
            }
 
            #wrapper {
                  top: 0;
                  bottom: 0;
                  overflow: auto;
                  z-index: 10;
                  -webkit-overflow-scrolling: touch;
            }
 
            #scroller {
                  z-index: 1;
            }

This generates a smooth scrollable view as like the native one.

For Android OS < 3.0:

if we targetted to cover android os earlier than 3.0, then we need a third party js library to handle it as css3 -webkit-overflow-scrolling property will not be supporting.
(i have used iscroll as it best suits my cases).

We need to add the js library file to the html page then add the below script on the body onload function,

var scrollView = new iScroll("wrapper");

 
Thats it, the scrolling will be like the native one.