スクロールの限界に来た時の挙動をコントロールする。

モーダルダイアログの構築のような場所でユーザーの操作や見た目を抑止する動きのために使うことが多いと思われる。

auto デフォルト値、ブラウザのデフォルトの挙動。

#hoge{
    overscroll-behavior: auto;
}

contain スクロール的操作をその要素から外部への伝播を抑止する

#hoge{
    overscroll-behavior: contain;
}

入れ子になっている内側のスクロールが限界まで来てスクロールできないところまで来た時に外側のスクロールを動作させないようにする。それ以外にもブラウザのスクロール的な動作でグローバルに働くような動きを抑止する。

#hoge{
    overscroll-behavior: none;
}

contain の動作に加え、スクロール限界が来た時に一部のブラウザで見られる余白までオーバーシュートしてバウンドしてもどってくるビヨーンとバウンドする見た目の挙動や、それを利用したような一連のリロード処理のようなモノも抑止する。

これは2つパラメータを横方向縦方向と指定することにより横方向のスクロールと縦方向のスクロールの挙動を別々に管理できる。

#hoge{
    overscroll-behavior: none contain;
}