CSS scroll-margin-inline کی خاصیت

تعلیم اور استعمال

scroll-margin-inline پروپارٹی اس کی دوری کا نشان دہی کرتی ہے کہ چوڑی سمت میں اتصال کی جگہ اور کوئرنر کے درمیان کی دوری کس طرح ہوتی ہے

یعنی، جب آپ توقف کرتے ہیں تو اس کی چوڑی سمت میں توقف جلد سے جلد ساتھ چپائی جاتی ہے اور اس کی دوری جو کیوں کہ اس کی جگہ اور کوئرنر کے درمیان ہوتی ہے، اس کی جگہ پر رکتی ہے

این لائن انگل کا مطلب یہ ہے کہ بعد کا اشارہ موجود اشارے کے ساتھ این لائن میں کس طرح چھپایا جاتا ہے، یہ بھی ایسے لیکچر (مثلاً <a> اور <strong> لیچر) جو CSS دیسپلے: این لائن; کا استعمال کرتے ہیں، مثلاً این لائن میں کس طرح بیچنے کا طریقہ اور بچنے کا طریقہ کس طرح رکھا جاتا ہے، این لائن انگل کا اشارہ کسی بچنے کی زبان پر منحصر ہوتا ہے، مثلاً اردو میں نئی اشاریاں سمت راستے سے چپائی جاتی ہیں، اس لئے این لائن انگل سمت راستے سے چپائی جاتی ہے، جب کہ انگریزی صفحے کا این لائن انگل سمت چپائی جاتی ہے، این لائن انگل کا اشارہ کسی CSS پروپارٹی کے ذریعے بغیر تبدیل کیا جاسکتا ہے، مثلاً direction 和 writing-mode تعلیم

اتصال کی جگہ کا مطلب یہ ہے کہ چوڑی عنصر اس وقت کوئرنر میں توقف کرنے پر جگہ پر آپ جا سکتا ہے جو اس کی توقف کی جگہ ہے。

scroll-margin-inline پروپارٹی مندرج پروپارٹیوں کا ایک چوٹی پروپارٹی ہے:

scroll-margin-inline پروپارٹی کی کمیت مختلف طریقوں سے ساتھ چینی کی جاسکتی ہے:

اگر scroll-margin-inline پروپارٹی میں دو کمیت ہیں:

scroll-margin-inline: 20px 70px;
  • شروعات کی دوری 20 پی ایکس ہوتی ہے
  • خاتمے کی دوری 70 پی ایکس ہوتی ہے

اگر scroll-margin-inline پروپارٹی میں ایک کمیت ہے:

scroll-margin-inline: 20px;
  • شروعات اور خاتمے کی دوری دونوں 20 پی ایکس ہوتی ہے

بینن چاہئیے scroll-margin-inline پروپارٹی کا اثر، چوڑی عناصر پر ساتھ چینی کرنا چاہئیے scroll-margin-inline 和 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-inline: 20px;
}

亲自试一试

例子 2

当 <div> 元素的 writing-mode 属性值设置为 vertical-rl 时，行内方向是向下。结果是元素的起始位置从左侧移动到顶部，元素的结束位置从右侧移动到底部。这也影响了 scroll-margin-inline 属性：

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

亲自试一试

例子 3

当 <div> 元素的 direction 属性值设置为 rtl 时，行内方向是从右到左。结果是元素的起始位置从左侧移动到右侧，元素的结束位置从右侧移动到左侧。这也影响了 scroll-margin-inline 属性：

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

亲自试一试

CSS 语法

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

属性值

值 描述
0 默认。元素的默认 scroll-margin-inline 距离。
length

指定以 px、pt、cm 等单位的距离。允许使用负值。

请参阅：CSS ਯੂਨਿਟ。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： 0
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.scrollMarginInline="20px"

浏览器支持

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

ਸਬੰਧਤ ਪੰਨੇ

ਸਬੰਧਤ ਜਾਣਕਾਰੀ:CSS ڈائریکشن پرپرٹی

ਸਬੰਧਤ ਜਾਣਕਾਰੀ:CSS scroll-margin-inline-end کی خاصیت

ਸਬੰਧਤ ਜਾਣਕਾਰੀ:CSS scroll-margin-inline-start کی خاصیت

ਸਬੰਧਤ ਜਾਣਕਾਰੀ:CSS scroll-snap-align کی خاصیت

ਸਬੰਧਤ ਜਾਣਕਾਰੀ:CSS scroll-snap-type کی خاصیت

ਸਬੰਧਤ ਜਾਣਕਾਰੀ:CSS writing-mode ਪ੍ਰਤੀਯੋਗਿਤਾ