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

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

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

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

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

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

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

برای مشاهده scroll-padding-inline-end ویژگی، و باید در عنصر فرزند تنظیم شوند scroll-snap-align ویژگی‌ها، و باید در عنصر والد تنظیم شوند scroll-padding-inline-end و scroll-snap-type ویژگی.

مثال

مثال 1

تنظیم پرش درونی به سمت خطی از انتهای محیط به مکان هماهنگی به 20px:

div {
  scroll-padding-inline-end: 20px;
}

آزمایش کنید

مثال 2: کتابخانه تصاویر

scroll-padding-inline-end این ویژگی می‌تواند در تصاویر گالری‌هایی که دارای رفتار هماهنگی هستند استفاده شود تا تصاویر را از عناصر ثابت به بیرون هل دهد:

#container {
  scroll-padding-inline-end: 30px;
}

آزمایش کنید

مثال 3

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

#container {
  scroll-padding-inline-end: 20px;
  writing-mode: vertical-rl;
}

آزمایش کنید

مثال 4

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

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

آزمایش کنید

آموزش CSS:

scroll-padding-inline-end: auto|value|initial|inherit;

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

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

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

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

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