iOSのブラウザで発生する、スクロールの端でびよーんとなるのを抑える。

2023年02月27日 12時00分月齢:7.2[弓張月(上弦)] 潮汐:小潮
(最終更新日:2023年02月28日)
10か月前に投稿 | ウェブ・IT関係 | コメントはありません

iPhoneやiPadで当サイトを閲覧すると、こんなふうにスクロールの端でびよーんと伸びて表示されました。FirefoxでもSafariでも発生します。Chromeは使っていないのでわからないけど。

まぁこれはこれで、こういうのが好きな人にはいいんでしょうけど…

個人的にはこのテのapple臭い味付けが気色悪くて大嫌い。カチッと止まってくれるほうが心地よいのです。

そんなわけで、overscroll-behaviorプロパティを使って、このびよーんとなる挙動を抑制してみましょう。

html {overscroll-behavior: none;}

副作用として、上下方向に引っ張ってのリロードは無効化されます。

けど、スクロールの終点でカチッと止まって爽快ですよ。