iphoneでぐいっと下に引っ張ってリロードする機能を無効化するCSSは以下
html {
overscroll-behavior: none;
}
ブラウザによってはbodyに指定しないと動かないものもあるようなので両方に入れておきましょう。
これでカチッとしていい感じになるね!
しかし弊害もあります。
遭遇した弊害
iphoneで画面を素早くスクロールした際、勢い余って見えてる画面と実際に存在しているボタンやリンクなんかがずれてしまうことがあります。
見えてるボタンの少し上(や下)に実際のボタンがある状態で、ボタンに見えるそれをクリックしてもずれていて押せません。
特にヘッダー等を固定(fixedやsticky)にした状態で素早くスワイプするとよくずれます。
これ、overscroll-behaviorをあきらめると治ります。残念..
関連ワード
Pull-to-Refresh, scroll-margin-top, scroll-pading-top, position sticky,