Cordova アプリを iPhone の実機で動作確認したとき、何も設定していないと、端までスクロールした際にびよーんと伸びる、という現象が起こるかと思います。
今回はこの現象を無効化する方法について。
ちなみに、これのことを「バウンススクロール」もしくは「オーバースクロール」と呼びます。
今回参考にさせていただいた記事はこちらから。
Cordova iOS アプリで画面外にまでオーバースクロール (バウンド) しないようにする – Corredor
http://neos21.hatenablog.com/entry/2017/06/21/080000
早速、結論の実装方法を紹介すると、comfig.xml に下記を追加するだけです。
<preference name="DisallowOverscroll" value="true" />
こちらを追加してアプリを実行すると、画面端までいくとそれ以上スクロールしなくなります。
この設定を追加すれば、例えば Twitter のように、「タイムラインの一番上まで行ったときに、さらにスクロールすると再読み込みを行う」などの、スクロールがトリガーとなった処理を行いたいときに、挙動がおかしくなることを防ぐことができます。
ちなみに、今回のバウンススクロール禁止を検索していた時、下記の CSS プロパティにもヒットしました。
body {
overscroll-behavior: none;
}
こちらは、Google Chrome などのブラウザでは正常に動作しましたが、Cordovaアプリでは特に効果はないようでした。
他にも、height: 100%; と overflow: hidden; を使って、スクロール自体を発生させない＆無効にするという方法もありましたが、他の要素がスクロールできなくなるなど影響があったので、こちらは採用しませんでした。
何より、comfig.xml に一行追加するだけ！という手軽さなら、こちらを採用しない手はないかと。
以上、CordovaアプリをiOSで実行した時のバウンススクロールを無効化する方法でした。
一気にアプリらしくなるので、是非、導入をご検討ください。
