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 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;

مقدار ویژگی

جزئیات فنی

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

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

مطابقت کی صفحات

مطابقت:CSS دیکشن کا اپریشن

مطابقت:CSS سکرول سناپ آلائن پرپرتی

مطابقت:CSS سکرول سناپ تایپ پرپرتی

مطابقت:CSS writing-mode کیمپٹی