Android ChromeでPull-to-RefreshをCSSで無効化する。

##はじめに

Pull-to-Refresh(ページの一番上までいる時にさらに下にスワイプするとリロードされるやつ)
を無効にしたいと思い調べた所、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であればたぶん大丈夫。

まとめ

PWA対応時の際にはPull-to-Refreshが邪魔になる事があるのでさくっと無効にできるのは便利です。