overscroll-behavior-y を試す

1. このページの目的

CSS の overscroll-behavior-y プロパティを試します。

2. overscroll-behavior-y について

overscroll-behavior-y は CSS のプロパティで、スクロール領域の垂直方向の境界に達したときのブラウザーの挙動を設定します。

引用元：overscroll-behavior-y - CSS: カスケーディングスタイルシート | MDN>

3. デモ

以下のボックス上でスクロール操作したとき、このページ自体はスクロールしない。

Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS

.demo1 {
  width: 200px;
  height: 150px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

4. 参考