以前書いたものですが、消えてしまったので改めて書きます。

スマホ用のサイトを作っていて、overflow:scrollでスクロールする領域を作ることはよくあると思います。しかし、自分で作ったスクロール領域はiPhoneやiPadで見ると滑らかなスクロールをしてくれません。

そんな時はcssの-webkit-overflow-scrollingプロパティを使うと、慣性スクロールが有効になり滑らかなスクロールが実現できます。

-webkit-overflow-scrollingの指定方法

.scroll {
  height: 100px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

上記のように、-webkit-overflow-scrollingを「touch」に指定してやればOKです。
なお、-webkit-overflow-scrollingは「auto」と「touch」の2つの指定方法があり、デフォルトは「auto(慣性スクロール無効)」になっています。