Smooth Scrolling Website in iOS - CSS

There is a mobile optimized version of this page, view AMP Version.

A client recently approached me wanting some fixes and improvements to his responsive website, his main problems were with mobile view of the website where things needed cleaning up and streamlining. While in the meeting he mentioned that another site was scrolling really nice in Safari on iPhone, but his site was sluggish and looked as though it was struggling. I was perplexed, this is something I had not seen before or been asked about.

It turned out the developer of the site had done some crazy CSS to fix the body height to the screen height and then use a scroll bar on another DIV in the page, and safari enables smooth scrolling for the BODY tag only by default.

Anyone else having this issue you can easily enable smooth scrolling for mobile devices by applying the following CSS:

-webkit-overflow-scrolling: touch;

Author: Dean Williams

I'm a Web Developer, Graphics Designer and Gamer, this is my personal site which provides PHP programming advice, hints and tips