CSS scroll-margin-inline کئیتیئٹ

تعریف و استفاده

scroll-margin-inline ویژگی فاصله بین موقعیت چسبندگی و محفظه در جهت درون خطی را مشخص می‌کند.

این به این معناست که، هنگامی که شما اسکرول را متوقف می‌کنید، اسکرول به سرعت تنظیم می‌شود و در فاصله مشخص شده در جهت درون خطی در فاصله بین موقعیت چسبندگی و محفظه متوقف می‌شود.

جهت درون خطی به جهت قرارگیری کاراکتر بعدی نسبت به کاراکتر موجود در خط اطلاق می‌شود، این نیز روش قرارگیری برچسب‌هایی با CSS display: inline; در متنی است (مانند برچسب‌های <a> و <strong>) در متنی است. جهت درون خطی بستگی به زبان نوشتاری دارد، به عنوان مثال، کاراکترهای جدید عربی به سمت راست به ترتیب قرار می‌گیرند، بنابراین جهت درون خطی از راست به چپ است، در حالی که جهت درون خطی در صفحات انگلیسی از چپ به راست است. جهت درون خطی می‌تواند از طریق ویژگی CSS تنظیم شود direction 和 writing-mode تعریف.

موقعیت چسبندگی به موقعیتی اطلاق می‌شود که فرزندعناصر در هنگام توقف اسکرول به داخل محفظه چسبیده می‌شوند.

scroll-margin-inline ویژگی یک شورت‌کر برای ویژگی‌های زیر است:

scroll-margin-inline مقدار ویژگی می‌تواند از طریق روش‌های مختلف تنظیم شود:

اگر ویژگی scroll-margin-inline دو مقدار داشته باشد:

scroll-margin-inline: 20px 70px;
  • فاصله شروع 20px است
  • فاصله پایان 70px است

اگر ویژگی scroll-margin-inline یک مقدار داشته باشد:

scroll-margin-inline: 20px;
  • فاصله شروع و پایان 20px است

دیدن 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-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 کا حصہ