CSS scroll-margin-block 属性

定义和用法

scroll-margin-block 属性指定在块方向上，吸附位置（snap position）与容器之间的距离。

这意味着当您停止滚动时，滚动会快速调整并停止在块方向上吸附位置与容器之间的指定距离处。

块方向是指相对于现有行位置放置下一行的方向，这也是具有 CSS display: block; 的标签（如 <p> 和 <div> 标签）在页面上的布局方式。块方向取决于书写语言，例如，蒙古语的新行从左到右排列，因此块方向也是从左到右，而英文页面的块方向是向下。块方向可以通过 CSS 属性 writing-mode 来定义。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。

注意：此属性仅在块方向的 scroll-snap-align 属性设置为 'start' 或 'end' 时有效。

• scroll-margin-block-start
• scroll-margin-block-end

scroll-margin-block 属性的值可以通过不同方式设置：

scroll-margin-block 属性有两个值：

scroll-margin-block: 10px 50px;

• 終点の距離は50pxです
• 始点の距離は10pxです

scroll-margin-block属性に値がある場合

scroll-margin-block: 10px;

• 終点の距離は50pxです

始点と終点の距離がすべて10pxの場合 scroll-margin-block 属性の効果を見るには、子要素に設定する必要があります。 scroll-margin-block および scroll-snap-align 属性が、親要素に設定されている場合、 scroll-snap-type 属性と

CSSの scroll-margin-inline および scroll-margin-block 属性はCSS属性 CSS scroll-margin-top 属性、scroll-margin-bottom、scroll-margin-left および scroll-margin-right 非常に似ていますが、 scroll-margin-block および scroll-margin-inline 属性はブロック方向と行内方向に依存しています。

例

例1

ブロック方向上のアタッチメント位置とスクロール可能コンテナ間の距離を設定します：

div {
  scroll-margin-block: 10px;
}

自分で試してみてください

例2

子要素の writing-mode 属性値がvertical-rlに設定されている場合、要素のブロック方向の開始位置は上から右側に、終了位置は下から左側に移動します。これはスクロールアタッチメントの動作に影響を与え、 scroll-margin-block 属性の動作方法：

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

自分で試してみてください

CSS 文法

scroll-margin-block: 0|value|initial|inherit;

属性値

技術的な詳細

ブラウザのサポート

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

関連ページ

参考：CSS scroll-margin-block-end 属性

参考：CSS scroll-margin-block-start 属性

参考：CSS scroll-snap-align 属性

参考：CSS scroll-snap-type 属性

参考：CSS writing-mode 属性