浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】iOSで画面を滑らかにスクロールさせる方法

iOSの端末で縦に長い画面をスクロールさせた時に、慣性スクロールが効かず、途中でつっかえるような、ぎこちない動きになってしまったときの対処法です。
と言っても対処法というほど難しいことはなく、そのスクロールする要素に対して -webkit-overflow-scrolling プロパティを適用するだけです。
具体的には下記のとおりです。

<div class="scroll">
    <p>スクロールさせたい要素です</p>

    // 以下、要素の中身を記述
</div>
.scroll {
    height: 300px;
    overflow: scroll;
    -webkit-overflow-scrolling : touch;
}

重要なのは、4行目の -webkit-overflow-scrolling : touch; です。
これを指定することで、慣性スクロールが有効になります。

この -webkit-overflow-scrolling プロパティは、値に auto もしくは touch を指定します。
なお、デフォルト値は auto で、この場合は慣性スクロールが適用されません。

 

ということで、iOS で慣性スクロールを適用する方法でした。
この指定があるのとないのでは、実際に使っているときの感覚に大分違いがあるので、スマートフォンでの閲覧が考えられる場合は、記述しておいた方が無難だと思います。
スマートフォンでのスクロールがカクつくと、ここまでなのか!と意外なくらい、ストレスを感じました。

  • この記事いいね! (0)