CSS scroll-margin-block-start پراپرتی

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

scroll-margin-block-start ਵਿਸ਼ੇਸ਼ਤਾ ਬਲਾਕ ਡੈਨੇਸ਼ਨ 'ਤੇ ਸਥਾਨ ਦੀ ਦੂਰੀ ਸੁਝਾਉਂਦੀ ਹੈ。

ਇਹ ਮਤਲਬ ਹੈ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਰੋਲਿੰਗ ਰੁਕਾਉਂਦੇ ਹੋ, ਤਾਂ ਰੋਲਿੰਗ ਤੇਜ਼ੀ ਨਾਲ ਸਮਾਪਤ ਹੋ ਜਾਵੇਗਾ ਅਤੇ ਬਲਾਕ ਡੈਨੇਸ਼ਨ 'ਤੇ ਉਸ ਸਥਾਨ ਉੱਤੇ ਜਾਵੇਗਾ ਜਿਥੇ ਸੰਕੇਤ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਸੰਕੇਤ ਕੀਤੇ ਗਏ ਦੂਰੀ ਉੱਤੇ ਹੋਵੇਗਾ।

ਬਲਾਕ ਡੈਨੇਸ਼ਨ ਹੈਂ ਇਹ ਹੈ ਕਿ ਅਗਲੀ ਲਾਈਨ ਮੌਜੂਦਾ ਲਾਈਨ ਤੋਂ ਮੁਕਾਬਲੇ ਵਿੱਚ ਪਾਏ ਜਾਣ ਵਾਲਾ ਮੌਕਾ, ਇਹ ਵੀ ਹੈ ਜਿਸ ਨੂੰ CSS display: block; ਦੇ ਟੈਗ (ਜਿਵੇਂ <p> ਅਤੇ <div> ਟੈਗ) ਵੈੱਬਸਾਈਟ 'ਤੇ ਸਥਾਨ ਦੇ ਤਰੀਕੇ ਹੈ। ਬਲਾਕ ਡੈਨੇਸ਼ਨ ਲਿਖਣ ਵਾਲੇ ਭਾਸ਼ਾ ਉੱਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ, ਉਦਾਹਰਣ ਲਈ ਮੰਗੋਲੀ ਭਾਸ਼ਾ ਦੀਆਂ ਨਵੀਆਂ ਲਾਈਨਾਂ ਸੱਜੇ ਤੋਂ ਵੱਲ ਲਿਖੀਆਂ ਜਾਂਦੀਆਂ ਹਨ, ਇਸ ਲਈ ਬਲਾਕ ਡੈਨੇਸ਼ਨ ਸੱਜੇ ਤੋਂ ਵੱਲ ਹੈ, ਜਦਕਿ ਅੰਗਰੇਜ਼ੀ ਪੰਨੇ ਦਾ ਬਲਾਕ ਡੈਨੇਸ਼ਨ ਹੇਠਾਂ ਹੈ। ਬਲਾਕ ਡੈਨੇਸ਼ਨ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਰਾਹੀਂ ਸੁਧਾਰਿਆ ਜਾ ਸਕਦਾ ਹੈ, writing-mode 定义。

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

注意：此属性仅在块方向的 scroll-snap-align 属性设置为 'start' 时才起作用。

要看到 scroll-margin-block-start 属性的效果，必须在子元素上设置 scroll-margin-block-start 和 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

在块方向上，将对齐位置与容器之间的滚动外边距设置为 20px：

div {
  scroll-margin-block-start: 20px;
}

亲自试一试

例子 2

当 <div> 元素的 writing-mode 属性值设置为 vertical-rl 时，块方向为从右到左。结果是元素的开始部分从顶部移动到右侧：

div {
  scroll-margin-block-start: 50px;
  writing-mode: vertical-rl;
}

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

ਸਬੰਧਤ ਪੰਨੇ

ਸਲਾਹਦਾਰੀਕਰਨ:CSS scroll-snap-align ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਰੀਕਰਨ:CSS scroll-snap-type ਪ੍ਰਤੀਯੋਗਿਤਾ

ਸਲਾਹਦਾਰੀਕਰਨ:CSS ਵਰਟਿੰਗ-ਮੋਡ ਪ੍ਰਾਪਰਟੀ