Android ChromeでPull-to-RefreshをCSSで無効化する。
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