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

پیشنهاد دوره:

وقتی مقدار ویژگی به 'vertical-rl' تنظیم شود، موقعیت شروع درجه خطی درون عنصر و فرزندان آن از بالا به سمت راست حرکت می‌کند. این می‌تواند رفتار چسبندگی اسکرول را نیز تحت تأثیر قرار دهد و تعریف و استفاده

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

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

تعریف.

موقعیت چسبندگی به معنای این است که وقتی شما رول را متوقف می‌کنید، عنصر فرزند در داخل کانتینر به موقعیت چسبندگی می‌رسد.توجه: ویژگی scroll-snap-align این ویژگی تنها در جهت خطی تنظیم شده است

باید ویژگی 'start' باشد تا عمل کند. وقتی مقدار ویژگی به 'vertical-rl' تنظیم شود، موقعیت شروع درجه خطی درون عنصر و فرزندان آن از بالا به سمت راست حرکت می‌کند. این می‌تواند رفتار چسبندگی اسکرول را نیز تحت تأثیر قرار دهد و ویژگی، باید در عنصر فرزند تنظیم شود تا اثر آن دیده شود ویژگی scroll-snap-align ویژگی، و باید در عنصر والد تنظیم شود وقتی مقدار ویژگی به 'vertical-rl' تنظیم شود، موقعیت شروع درجه خطی درون عنصر و فرزندان آن از بالا به سمت راست حرکت می‌کند. این می‌تواند رفتار چسبندگی اسکرول را نیز تحت تأثیر قرار دهد و و scroll-snap-type ویژگی.

ویژگی.

مثال

مثال 1

تنظیم کردن فضای اسکرول درونی‌پایین از موقعیت شروع مخزن به موقعیت چسبندگی درجه خطی به سمت راست به 20px:
  scroll-padding-inline-start: 20px;
}

تست کنید

div {

وقتی مقدار ویژگی به 'vertical-rl' تنظیم شود، موقعیت شروع درجه خطی درون عنصر و فرزندان آن از بالا به سمت راست حرکت می‌کند. این می‌تواند رفتار چسبندگی اسکرول را نیز تحت تأثیر قرار دهد و مثال 2: کتابخانه تصاویر

#container {
  این ویژگی می‌تواند در تصاویر گالری‌هایی که دارای رفتار چسبندگی هستند استفاده شود تا تصاویر را از عناصر ثابت بیرون بیاندازد:
}

تست کنید

scroll-padding-inline-start: 30px;

وقتی عنصر مخزن مثال 3 نوشتن وقتی مقدار ویژگی به 'vertical-rl' تنظیم شود، موقعیت شروع درجه خطی درون عنصر و فرزندان آن از بالا به سمت راست حرکت می‌کند. این می‌تواند رفتار چسبندگی اسکرول را نیز تحت تأثیر قرار دهد و روش کارکردن ویژگی:

#container {
  scroll-padding-inline-start: 20px 0;
  نوشتن: vertical-rl;
}

تست کنید

مثال 4

وقتی عنصر مخزن جهت وقتی مقدار ویژگی به 'rtl' تنظیم شود، موقعیت شروع درجه خطی درون عنصر و فرزندان آن از سمت راست به سمت چپ حرکت می‌کند، و موقعیت پایان درجه خطی از سمت راست به پایین حرکت می‌کند. این می‌تواند رفتار چسبندگی اسکرول را نیز تحت تأثیر قرار دهد و scroll-padding-inline روش کارکردن ویژگی:

#container {
  scroll-padding-inline-start: 20px;
  جهت: rtl;
}

تست کنید

آموزش دستور زبان:

scroll-padding-inline-start: auto|value|مقدار اولیه|ارث‌پذیری;

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

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

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

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

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