CSS: overscroll-behavior - yuw27b’s blog

端までスクロールした時の振る舞いを、CSSで指定できる、というものです。

仕様：CSS Overscroll Behavior Module Level 1
対応状況：Can I use... Support tables for HTML5, CSS3, etc
MDNが分かりやすいです：
overscroll-behavior - CSS: カスケーディングスタイルシート | MDN

仕様としてはまだ草案段階で、Safariは対応していません。
ですが、「適切な場面で指定しておけばWebページが使いやすくなるが、なくても問題が起こるわけではない」タイプの機能なので、いわゆる"プログレッシブエンハンスメント"なアプローチとして採用するのは有効だと思います。

スクロールバーが入れ子になった状態で使う

MDNでは、縦に長いWebページ内に、小さなチャットウィンドウが乗っかっている例を取り上げています。ほとんどのブラウザでは、チャットを最後までスクロールしたら背後のメインコンテンツがスクロールし始めますが、overscroll-behaviorにnoneを指定すると、これを止める（スクロールを伝播させない）ことができます。

デモ：

See the Pen
vYXKWJg by Yu Watanabe (@yuw27b)
on CodePen.

「overscroll-behavior: none」のボタンを押してから、水色のボックス内をスクロールしてみてください。端まで行っても後ろのメインコンテンツはスクロールしないはずです。

「none」は、ブラウザ既定の振る舞いも止まる

overscroll-behaviorにnoneを指定すると、上記のように外側の要素へのスクロール伝播が止まりますが、同時にスクロールが端に達した時のブラウザ既定の振る舞いが全て止まっています。例えばChromeでは上端までスクロールすると、跳ね返るようなアニメーションをしますが、body要素に{overscroll-behavior: none}を指定すると、これがなくなって、ピタッと止まります（この感覚久しぶりです）。
ブラウザ既定の振る舞いはさせたいけど、スクロール伝播は止めたい、という場合はoverscroll-behavior: containを指定すればOKです。

スマートフォンでは、「上端までスクロールしてさらに引っ張る」と、ページの再読み込みが行われますが、AndroidのChromeではこの振る舞いも止まるようです（未検証）。iOSのChromeは未対応のようで、いつも通り再読み込みが行われてしまいました…。

x,y 個別指定もできます

「overscroll-behavior-x」「overscroll-behavior-y」というプロパティもあります。

「背後のコンテンツまでスクロールしないほうがいいな」という状況は時々あるので、そういう時は「overscroll-behavior」が有効に使えそうです。ですが、ユーザーが期待している「いつもの動作」を止めることもできてしまうので、あまり濫用しないほうが良さそうとも思いました。