PWA作った時に、Pull-to-Refresh(ページの一番上までいる時にさらに下にスワイプするとリロードされるやつ) を無効にしたい
と思って、Qiitaとか調べたらJavaScriptつかってごにょごにょすれば出来る記事はあったのですが、
最近はCSSだけでいけるようなので調べてみました。

対象プロパティ

  • overscroll-behavior-y

https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior-y

設定例

body {
  overscroll-behavior-y: none;
}

ブラウザーの対応

  • Android Chrome は63以降(2017/12リリース)
  • iOS Safari は未対応

なので普通に使われてるAndroidであればたぶん大丈夫。

https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior-y#Browser_compatibility