CSS scroll-margin-inline-start ਪ੍ਰਾਪਰਟੀ

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

scroll-margin-inline-start ਇਹ ਲੋੜ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ ਕਿ ਲਾਈਨ ਦਿਸ਼ਾ ਵਿੱਚ, ਸਬੰਧਤ ਸਥਾਨ ਅਤੇ ਕੰਟੇਨਰ ਦਰਮਿਆਨ ਦੂਰੀ ਨਿਰਧਾਰਿਤ ਕਰੇ।

ਇਹ ਮਤਲਬ ਹੈ ਕਿ ਜਦੋਂ ਤੁਸੀਂ ਰੋਲਿੰਗ ਰੁਕਾਓ ਤਾਂ ਰੋਲਿੰਗ ਤੇਜ਼ੀ ਨਾਲ ਸਾਬਤ ਹੋ ਜਾਵੇਗਾ, ਅਤੇ ਸਬੰਧਤ ਉਪ-ਏਕਾਈ ਦੇ ਸ਼ੁਰੂ ਸਥਾਨ ਅਤੇ ਕੰਟੇਨਰ ਦਰਮਿਆਨ ਲਾਈਨ ਦਿਸ਼ਾ ਵਿੱਚ ਨਿਰਧਾਰਿਤ ਦੂਰੀ ਤੇ ਰੁਕੇਗਾ。

ਲਾਈਨ ਦਿਸ਼ਾ ਹੈ ਜੋ ਅਗਲੇ ਚਿੱਤਰ ਮੌਜੂਦਾ ਚਿੱਤਰ ਦੇ ਬਾਅਦ ਲਾਈਨ ਵਿੱਚ ਸਥਾਨ ਪਾਉਣ ਦੀ ਦਿਸ਼ਾ ਹੈ, ਇਹ ਵੀ ਹੈ ਜੋ ਕਿ CSS display: inline; ਦੇ ਟੈਗ (ਜਿਵੇਂ ਕਿ <a> ਅਤੇ <strong> ਟੈਗ) ਲਾਈਨ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣ ਦੀ ਤਰਾਂ ਹੈ। ਲਾਈਨ ਦਿਸ਼ਾ ਲਿਖਣ ਭਾਸ਼ਾ ਉੱਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ, ਉਦਾਹਰਣ ਲਈ ਅਰਬੀ ਦੇ ਨਵੇਂ ਚਿੱਤਰ ਦਾਇਰਾ ਵੱਲੋਂ ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਵੱਲ ਕਰਨ ਵਾਲੇ ਹਨ, ਇਸ ਲਈ ਲਾਈਨ ਦਿਸ਼ਾ ਵੱਲੋਂ ਸੱਜੇ ਤੋਂ ਖੱਬੇ ਵੱਲ ਹੈ, ਜਦਕਿ ਅੰਗਰੇਜ਼ੀ ਪੰਨੇ ਦੀ ਲਾਈਨ ਦਿਸ਼ਾ ਵੱਲੋਂ ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਵੱਲ ਹੈ। ਲਾਈਨ ਦਿਸ਼ਾ CSS ਲੋੜ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੀ ਹੈ direction 和 writing-mode 定义。

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

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

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-inline-start: 20px;
}

亲自试一试

例子 2

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

div {
  scroll-margin-inline-start: 20px;
  writing-mode: vertical-rl;
}

亲自试一试

例子 3

当 <div> 元素的 direction 属性值设置为 rtl 时，行内方向是从右到左。结果是元素的起始位置从左侧（相对于原方向而言，实际上仍是在右侧开始，但这里的“左侧”是指原默认方向（ltr）的左侧）调整：

div {
  scroll-margin-inline-start: 20px;
  direction: rtl;
}

亲自试一试

CSS 语法

inset-inline-start: 0|value|initial|inherit;

属性值

技术细节

浏览器支持

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

ਸਬੰਧਤ ਪੰਨੇ

ਸਲਾਹ:CSS دیکریشن属性

ਸਲਾਹ:CSS scroll-snap-align ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹ:CSS scroll-snap-type ਪ੍ਰਾਪਰਟੀ

ਸਲਾਹ:CSS writing-mode ਵਿਸ਼ੇਸ਼ਤਾ