概要

overscroll-behavior-inlineプロパティは、CSSで要素のインライン方向（横方向）のオーバースクロールの挙動を制御するためのプロパティです。このプロパティを使用することで、スクロールコンテナが端に達した際のスクロール効果（オーバースクロール）の挙動を調整でき、スクロールの伝播を防いだり、特定のスクロール効果を維持することができます。

構文

overscroll-behavior-inline: auto | contain | none;

パラメータ

• auto
  デフォルトの設定で、オーバースクロールが発生した際にブラウザの標準的な動作（スクロールバウンスやスクロールの連鎖）が適用されます。
• contain
  オーバースクロールを抑制し、スクロールの連鎖を防ぎますが、端でのバウンス効果は維持されます。親要素やビューポートへのスクロールの伝播を防ぎたい場合に使用します。
• none
  完全にオーバースクロールを抑制し、スクロールの連鎖やバウンス効果をすべて防ぎます。スクロールの端に到達してもスクロールイベントが外部に伝播しないようにします。

戻り値

overscroll-behavior-inlineは、指定された値に従ってインライン方向のオーバースクロール挙動を制御します。これにより、横方向のスクロールの伝播やバウンスの挙動が調整され、ユーザー体験が改善されます。

説明

overscroll-behavior-inlineは、スクロールコンテナがインライン方向にスクロールした際、コンテナの端に達した場合のスクロール効果を調整するためのプロパティです。例えば、横スクロールが必要な要素がページの他の要素に影響を与えないようにしたい場合、このプロパティが有効です。スクロールの伝播やバウンス効果を調整することで、ユーザーがより直感的な操作感を得ることができます。

主な特徴

• インライン方向（横方向）のオーバースクロールを制御し、スクロールの伝播やバウンス効果を調整できます。
• スクロールの伝播を防ぐことで、ユーザーが意図しないスクロールが発生するのを防ぎます。
• overscroll-behavior-blockと組み合わせることで、ブロック方向のオーバースクロールも個別に調整可能です。

使用例

基本的な使用例

以下の例では、overscroll-behavior-inlineをcontainに設定し、親要素へのスクロール伝播を防いでいます。

.container {
  width: 300px;
  height: 150px;
  overflow: auto; /* スクロールを有効化 */
  overscroll-behavior-inline: contain; /* 親要素へのスクロール伝播を防ぐ */
  background-color: lightblue;
  white-space: nowrap;
}
.content {
  display: inline-block;
  width: 500px;
  height: 100px;
  background-color: coral;
}

この設定により、子要素のスクロールが端に達しても、スクロールの連鎖が親要素に伝播しません。

完全にオーバースクロールを抑制する例

noneを使用して、スクロールの連鎖とバウンス効果を完全に防ぎます。

.container {
  width: 300px;
  height: 150px;
  overflow: auto; /* スクロールを有効化 */
  overscroll-behavior-inline: none; /* オーバースクロールを完全に抑制 */
  background-color: lightgreen;
  white-space: nowrap;
}
.content {
  display: inline-block;
  width: 600px;
  height: 100px;
  background-color: salmon;
}

この設定では、スクロールが端に達しても、バウンスや親への伝播が一切発生しません。

デフォルトの動作を維持する例

autoを指定して、デフォルトのスクロール挙動を維持します。

.container {
  width: 400px;
  height: 150px;
  overflow: auto; /* スクロールを有効化 */
  overscroll-behavior-inline: auto; /* デフォルトのオーバースクロール挙動 */
  background-color: lightyellow;
  white-space: nowrap;
}
.content {
  display: inline-block;
  width: 500px;
  height: 100px;
  background-color: lightcoral;
}

この設定では、ブラウザの標準的なスクロールバウンスや伝播動作がそのまま維持されます。

注意点

• overscroll-behavior-inlineはoverscroll-behaviorのインライン方向のみを制御するもので、ブロック方向の制御は含まれません。必要に応じて、overscroll-behavior-blockと併用してください。
• ブラウザによってサポート状況が異なる場合があるため、使用前に対応状況を確認することが重要です。
• スクロール挙動を意図的に制御しすぎると、ユーザーの直感的な操作が阻害される場合があるため、慎重に設定を行うことが推奨されます。

まとめ

overscroll-behavior-inlineプロパティは、要素のインライン方向のオーバースクロール挙動を柔軟に制御し、ユーザーのスクロール操作をより直感的に調整するための便利なツールです。特にスクロール伝播を防ぐことで、複雑なレイアウトや多層のスクロールコンテナにおいて、意図しないスクロールを防ぎ、洗練されたユーザー体験を提供できます。