CSS overscroll-behavior-block 属性

定義と用法

overscroll-behavior-block ブロック方向でスクロールを超えた際に、要素上のスクロールチェーン（scroll chaining）またはオーバースクロールフィードバック（overscroll affordance）を無効にする属性です。

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

スクロールチェーンとは、ある要素上でオーバースクロールが発生すると、親要素のスクロール動作が引き起こされることです。これはデフォルトの動作です。

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

注意：関連する CSS 属性 writing-mode ブロック方向を定義します。これにより、ブロック方向が x 方向か y 方向になるか、および overscroll-behavior-block 属性の結果。英語のページでは、ブロック方向は下方向で、インライン方向は左から右です。

インスタンス

例1

ブロック方向でスクロール可能な <div> 要素のスクロールチェーンをオフにします：

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

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

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

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

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

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

CSS 文法

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

参照：CSS overscroll-behavior 属性

参照：CSS overscroll-behavior-inline 属性

参照：CSS overscroll-behavior-x 属性

参照：CSS overscroll-behavior-y 属性

参照：CSS scroll-behavior 属性

参照：CSS scroll-margin 属性

参照：CSS scroll-padding 属性

参照：CSS scroll-snap-align 属性

参照：CSS writing-mode 属性