現在開発中のアプリで作成してもらったデザインを反映したところ、スクロールした時にガクガクと画面が揺れて、画面上と下にそれぞれ固定してあるヘッダーとフッターも一瞬ズレたりしたのでそれの修正方法についてです。
なお、実行環境は 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 アプリでスクロールがカクつく時の対処法でした。
どなたかのご参考になれば幸いです。
