overscroll-behaviorプロパティでオーバースクロールを制御

2022年07月05日 13:59:30

overscroll-behaviorは、テキストエリアやスクロール可能な領域をスクロールして、境界に達したときの挙動を制御するCSSプロパティです。

ページのオーバースクロールの制御

特にモバイルブラウザだとページの境界を超えてオーバースクロール（バウンス）できますが、それを抑止したい場合は、body要素に対して、次のようにプロパティを指定します。

body {
  overscroll-behavior: none;
  /* 垂直方向だけで良い場合はoverscroll-behavior-yで指定 */
}

個人的に、Webアプリケーションサイトとかなら抑止しなければならないケースはあると思いますが、一般的なWebサイト（LPとか）で抑止が必要なケースはあんまりないのかなと思います。（もしかしたらあるのかも）

ページではなく、コンポーネント（テキストエリア等）にオーバースクロールの制御をするケースとしては、スクロール連鎖（scroll chaining）をケアする時だと思います。

ちょっとしたサンプルを載せておきます。

次のサンプルは、テキストエリアの垂直方向のオーバースクロールについて、スクロールが境界に達した時にページ自体のスクロールに連鎖することを抑止するといったことをしています。

textarea {
  width: 100%;
  height: 200px;
  overscroll-behavior-y: contain;
  resize: none;
}

ご利用の際は、プロパティの仕様・対応ブラウザをご覧ください。