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

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

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

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

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

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

توجه داشته باشید:این ویژگی تنها در scroll-snap-align تنها زمانی که ویژگی‌های درون‌محوری به 'start' تنظیم شوند، عمل می‌کنند.

ویژگی‌های 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-start: 20px;
}

آزمایش کنید

مثال 2

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

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

آزمایش کنید

مثال 3

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

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

آزمایش کنید

آموزش زبان CSS:

inset-inline-start: 0|value|initial|inherit;

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

منبع:ویژگی direction CSS

منبع:ویژگی scroll-snap-align CSS

منبع:ویژگی scroll-snap-type CSS

منبع:ویژگی writing-mode CSS