overscroll-behavior

プロパティ : overscroll-behavior

スクロール操作したときに前面のコンテンツを端までスクロールしたあとの挙動を制御

記述例
overscroll-behavior: contain;
overscroll-behavior-x、overscroll-behavior-y はまとめて設定できる。
2つの値の場合は overscroll-behavior: auto（横軸） contain（縦軸）;

ハンバーガーメニューやダイアログなどの表示をした時に、ダイアログ内だけスクロールさせたい場合、背景をスクロール連鎖させたくない時に指定

• overscroll-behavior: auto;
  初期値。スクロール連鎖が発生
• overscroll-behavior: none;
  noneはスクロール連鎖を抑制し、オーバースクロール効果も防止
• overscroll-behavior: contain;
  containはスクロール連鎖を抑制し、オーバースクロール効果を表示

オーバースクロール効果

スクロール境界に達した時の視覚的エフェクト(バウンド等)

以前はモーダル表示時、jsでbodyタグに modal-openクラスをつけて、cssでoverflow: hidden;にしていた

body.modal-open {
overflow: hidden;
}

overscroll-behavior: が効かない場合の注意点

記述例
対処法 : overflow-y: auto;を要素に記述。
原因 : スクロールしない要素に対して overscroll-behaviorを指定しても効果がないので、背面のページが代わりにスクロールしてしまう。