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

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

scroll-padding-block-end ویژگی مشخص می‌کند که فاصله بین انتهای جعبه تا مکان چسبندگی عنصر چیست.

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

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

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

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

برای مشاهده scroll-padding-block-end ویژگی بر روی عنصر پدر تنظیم شود، تا تأثیر آن بر عنصر فرزند تنظیم شود scroll-snap-align ویژگی، و باید ویژگی scroll-padding-block-end و scroll-snap-type ویژگی.

مثال

مثال 1

با تنظیم حاشیه داخلی اسکرول بلاک از انتهای کانتینر تا موقعیت چسبندگی 20px تنظیم کنید:

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

آزمایش کنید

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

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

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

آزمایش کنید

مثال 3

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

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

آزمایش کنید

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

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

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

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

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

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