overflowでスクロールを指定したときにiOSで滑らかな動きにする

overflowで要素内をスクロール指定したときに、iOSでは動きがぎこちなくなってしまいます。
そこで今回はスムーズにスクロールしてくれるプロパティの紹介をします。

プロパティの指定

-webkit-overflow-scrolling: touch;というプロパティを指定すると滑らかにスクロールしてくれます。
以下サンプルコードを記述します。

div{
  width: 100%;
  height: 300px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrollingの属性値は「auto」と「touch」があり、デフォルトでは「auto」になっています。
「touch」を指定することによりスムーズなスクロールを実装することが出来ます。