WebDesigner's Memorandumウェブデザイナーの備忘録

ブラウザでこれ以上スクロールできない場合の挙動を制御する「overscroll-behavior」プロパティ

Macのブラウザでこれ以上スクロールできない場所までスクロールしたのに、そこからさらに先へスクロールしようとすると画面が伸びて指を離すと跳ね返るような挙動になります。

要は「これ以上スクロールできませんよ」とユーザーに知らせるためのインタラクションです。

他にも左右にスワイプしたときにスマホの場合は「戻る」「進む」の挙動になるブラウザがあります。

このようなスマホブラウザ特有のスワイプ関連の機能は、デザインや作成したい機能によってオフにしたい場合があります(ウェブサイトというより、ウェブサービスの実装の場合は特に多いです)。

現状Safariには使えませんが、それ以外のブラウザでは使えるのがoverscroll-behaviorです。

overscroll-behavior

overscroll-behaviorは「auto」「contain」「none」の3種類の値があります。

内容
autoデフォルト値。ブラウザの挙動に任せる
containスクロール要素の外にはみ出さないようにする
noneスクロール要素の外にはみ出さないようにしつつ、
画面が伸びて指を離すと跳ね返るような挙動もオフになる

基本はautoかnoneかどっちかで良さそうです。派生プロパティ

overscroll-behavior-xoverscroll-behavior-yもあり、横方向のみと縦方向のみを制限できます。

左右にスワイプしたときの「戻る」「進む」動作は残しつつ、縦に伸ばしたときのスクロール効果だけ制御したいときに使えます。

対応ブラウザ

残念ながらSafariに対応していないのが現状です。
iPhoneユーザーの多くはSafariを使っていますし、SNSからリンクを開くとSafariで開かれてしまうので、overscroll-behaviorを使用するときは注意が必要です。

Data on support for the css-overscroll-behavior feature across the major browsers from caniuse.com

ただ、Google ChromeやFirefoxの挙動はオフにできるので、必要な場合は指定しておくと良さそうです。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね