ویژگی scroll-margin-inline-end CSS

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

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

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

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

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

توجه داشته باشید:این ویژگی تنها در جهت درون‌راست تنظیم شده است scroll-snap-align فقط در صورتی که تأثیر داشته باشد.

ویژگی به 'end' تنظیم شود scroll-margin-inline-end ویژگی، و برای مشاهده تأثیر آن باید در عنصر فرزند تنظیم شود scroll-margin-inline-end و 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-end: 20px;
}

آزمایش کنید

مثال 2

وقتی مقدار ویژگی <div> به writing-mode وقتی مقدار ویژگی vertical-rl تنظیم شود، جهت درون‌راست به سمت پایین تغییر می‌کند. نتیجه این است که انتهای عنصر از سمت راست به سمت پایین حرکت می‌کند:

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

آزمایش کنید

مثال 3

وقتی مقدار ویژگی <div> به direction وقتی مقدار ویژگی rtl تنظیم شود، جهت درون‌راست به سمت راست به چپ تغییر می‌کند. نتیجه این است که انتهای عنصر از سمت راست به سمت چپ حرکت می‌کند:

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

آزمایش کنید

زبان برنامه‌نویسی CSS

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

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

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

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

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

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