Smooth Overflow Scrolling in touch screen devices

Hi As we know that default scrolling in our Web Application's mobile view in not smooth enough whether it's Android or iOS.

As we scroll the page, the page scrolls normally but with a jerk not with that smoothness that comes in our default mobile applications.

What can we do to resolve this issue?

I also faced the same issue and finally, I found some solution for this.

In this case, we will use CSS's -WebKit-overflow-scrolling property. Let's take an example, suppose we have a div with a class name touch.

HTML

CSS

 .touch {
  width: 300px;
  height: 200px;
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}
 

What will this Do? This will make a scrollable section smooth. So that when we scroll we don't feel jerks.