【Cordova】iOS端末でのバウンススクロールを無効化する方法

村上 著者:村上

【Cordova】iOS端末でのバウンススクロールを無効化する方法

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で実行した時のバウンススクロールを無効化する方法でした。
一気にアプリらしくなるので、是非、導入をご検討ください。

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

著者について

村上

村上 administrator