スクロール領域にはoverscroll-behavior-yとscrollbar-gutterが必要

スクロール領域のoverflowについて

Webページ内の要素に幅300px、高さ250pxのスクロール領域を作成したい場合はCSSで以下のように指定する。

.foo {
  overflow-y: scroll;
  width: 300px;
  height: 200px;
}

textareaだと右下を横にドラッグするとWebページのレイアウトが崩れてしまうことがあるので「resize: vertical;」でドラッグによるサイズ変更を縦方向に制限したほうが良い場合が多い。

.bar {
  overflow: scroll;
  width: 300px;
  height: 200px;
  resize: vertical;
}

👆縦方向のリサイズも禁止する場合はresize: none;を指定する。

昔はこれで良かったのだが、現在ではこれだけではユーザーの使いやすさなどを考えたらプロパティの指定不足となる。

overscroll-behavior-yを追加する

スクロール領域にoverscroll-behavior-y: contain;を指定するとスクロール領域を最後までスクロールしてさらに下にスクロールしてページ下に予期せずスクロールしてしまうのを防ぐことができる。

.baz {
  overflow: scroll;
  width: 300px;
  height: 200px;
  resize: vertical;
  overscroll-behavior-y: contain;
}

👆これなら最後までスクロールして更に下にスクロールしてもWebページ自体がスクロールされることがなくなる。

scrollbar-gutterを追加する

スクロール領域にscrollbar-gutter: stable;を指定するとWindowsでテキスト量の増減によるテキスト幅の変化(Layout Shift)を防ぐことができる。

WindowsはMacと違ってテキストが少なくてスクロールバーが必要ない場合は表示されず幅が変わってしまうが、scrollbar-gutter: stable;が指定されていると横幅を一定に保つことができる。

.qux {
  overflow: scroll;
  width: 300px;
  height: 200px;
  resize: vertical;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

👆Macだと変わらないのでWindowsでテキスト量を変えてご確認ください。