Hausa lafiyanci scroll-margin-inline

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

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

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

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

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

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

• scroll-margin-inline-start
• scroll-margin-inline-end

اگر ویژگی 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 属性 Hausa lafiyanci scroll-margin-top、Hausa 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;

属性值

技术细节

浏览器支持

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

Hausa Related Pages

Hausa Reference:CSS kawun-doki hauka

Hausa Reference:Hausa lafiyanci scroll-margin-inline-end

Hausa Reference:Hausa lafiyanci scroll-margin-inline-start

Hausa Reference:Hausa lafiyanci scroll-snap-align

Hausa Reference:Hausa lafiyanci scroll-snap-type

Hausa Reference:Hausa writing-mode attribute