【CSS】iPhone（iOS）で滑らかにスクロールさせる方法（イージング効果）
css
iOS
iPhone
イージング効果
スクロール
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
iPhone（iOS）を画面をスクロールする際、イージング効果のある心地よい滑らかなスクロールをします。
しかし、overflowプロパティをscrollやautoを指定して、要素内をスクロールする場合、イージング効果のないWindowsのようなカクカクしたスクロールになります。
このカクカクしたスクロールを滑らかなイージング効果のあるスクロールにする方法があります。
この記事ではiPhone（iOS）で要素内をスクロールする際、滑らかなイージング効果のあるスクロールをする方法をご紹介したいと思います。
この記事の目次を表示
iPhone（iOS）で滑らかにスクロールさせる方法
iPhone（iOS）で要素内を滑らかにスクロールさせる方法はこちら。
.box{
-webkit-overflow-scrolling: touch;
}このCSSをスクロールさせたい要素に追加します。
.box{
overflow: auto;
-webkit-overflow-scrolling: touch; // これを追加する
}実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
ちなみに-webkit-overflow-scrolling: touch;を指定していない場合の実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
-webkit-overflow-scrolling: touch;を指定した方は滑らかなイージング効果のあるスクロールになりますね。
まとめ
イージング効果は非常に心地いいものです。
是非-webkit-overflow-scrolling: touch;を指定して心地いいスクロールを実装してみて下さい。
