CSS overscroll-behavior-inline 属性

定義と用法

overscroll-behavior-inline この属性は、行内方向にスクロールを超えた際に、要素のスクロールチェーンを閉じるか、オーバースクロールフィードバックを無効にするために使用されます。

注意：行内方向に overscroll-behavior をトリガーするには、タッチパッドやタッチスクリーンでスライド操作を使用する必要があるかもしれません。

滚动链是指在一个元素上过度滚动会导致父元素的滚动行为。这是默认行为。

スクロールチェーンとは、要素上でオーバースクロールが発生すると、親要素のスクロール動作が発生することを指します。これはデフォルトの動作です。

オーバースクロールフィードバックは、ユーザーがスクロールの境界を超えようと試みたときに提供されるフィードバックです。例えば、モバイルデバイスでは、ページのトップにスクロールを超えようと試みたときに、ページのリフレッシュの視覚的なフィードバックが通常伴います。 overscroll-behavior-inline および overscroll-behavior-block 属性は CSS の overscroll-behavior-x および overscroll-behavior-y 属性は非常に似ていますが、 overscroll-behavior-inline および overscroll-behavior-block 属性はブロック方向と行内方向に依存しています。

注意：関連する CSS 属性 writing-mode 行内方向を定義します。これは、行内方向が x 軸方向か y 軸方向であるか、および overscroll-behavior-inline 属性の結果。英語ページでは、行内方向は左から右、ブロック方向は下向きです。

例

例1

行内方向上でスクロール可能な <div> 要素のスクロールチェーンを閉じます：

#yellowDiv {
  overscroll-behavior-inline: contain;
}

実際に試してみてください

例2：writing-mode属性の組み合わせ

<div> 要素の writing-mode 属性値が 'vertical-rl' に設定された場合、行内方向は y 軸方向に変わるため、 overscroll-behavior-inline 今や y 軸方向で動作し、x 軸方向ではありません：

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-inline: contain;
}

実際に試してみてください

CSS 言語

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

属性値

技術的詳細

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

参照：CSS overscroll-behavior 属性

参照：CSS overscroll-behavior-block 属性

参照：CSS overscroll-behavior-x 属性

参照：CSS overscroll-behavior-y 属性

参照：CSS scroll-behavior 属性

参照：CSS scroll-margin 属性

参照：CSS scroll-padding 属性

参照：CSS scroll-snap-align 属性

参照：CSS writing-mode 属性