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

【CSS】Cordovaアプリでスクロールがカクつく時の対処法

現在開発中のアプリで作成してもらったデザインを反映したところ、スクロールした時にガクガクと画面が揺れて、画面上と下にそれぞれ固定してあるヘッダーとフッターも一瞬ズレたりしたのでそれの修正方法についてです。
なお、実行環境は Android でした。

今回参考にさせていただいた記事はこちら。

IEとEdgeのスクロールのガタつきは楽しくカスタマイズしながら直そう! – More⁺Design – ホームページ制作
https://moreplus-design.com/blog/blog02/

タイトルに、IE とか Edge とありますが、Cordova アプリにも適用できました。

 

修正方法は、htmlに overflow: hidden;、bodyに overflow: auto; を指定することでした。
CSS で記述すると下記のとおりです。

html {
  overflow: hidden;
}
body {
  overflow: auto;
}

これを追加して再度アプリを実行したところ、スクロールした時のカクつきが解消され、実にスムーズに動きました!
私の環境では、HTML には特に指定なしで、body に overflow: hidden; が指定されていたので、それが悪さをしていたんですね。

 

以上、Cordova アプリでスクロールがカクつく時の対処法でした。
どなたかのご参考になれば幸いです。

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