ویژگی scroll-margin-inline CSS

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

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 ویژگی scroll-margin-top CSS،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;

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

تعداد در جدول نشان‌دهنده نسخه مرورگر اولیه‌ای است که این ویژگی را پشتیبانی می‌کند.

صفحات مرتبط

ارجاع به:ویژگی direction CSS

ارجاع به:ویژگی scroll-margin-inline-end CSS

ارجاع به:ویژگی scroll-margin-inline-start CSS

ارجاع به:ویژگی scroll-snap-align CSS

ارجاع به:ویژگی scroll-snap-type CSS

ارجاع به:ویژگی writing-mode CSS