ویژگی scroll-padding-block CSS

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

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

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

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

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

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

scroll-padding-block این ویژگی کوتاه‌نویسی از ویژگی‌های زیر است:

scroll-padding-block مقدار ویژگی می‌تواند به روش‌های مختلف تنظیم شود:

اگر scroll-padding-block ویژگی دو مقدار داشته باشد:

scroll-padding-block: 10px 50px;
  • فاصله شروع 10 پیکسله است
  • فاصله پایان 50 پیکسله است

اگر scroll-padding-block ویژگی یک مقدار داشته باشد:

scroll-padding-block: 10px;
  • فاصله شروع و پایان 10 پیکسله است

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

ویژگی‌های CSS scroll-padding-block و scroll-padding-inline ویژگی‌ها با ویژگی‌های CSS ویژگی scroll-padding-top CSS،scroll-padding-bottom،scroll-padding-left و scroll-padding-right بسیار مشابه است، اما scroll-padding-block و scroll-padding-inline این ویژگی به ترتیب جهت مستطیل و جهت خطی بستگی دارد.

مثال

مثال 1

در جهت مستطیل، پادپایه اسکرول را به 20px از مخزن به سمت عنصر چسبنده تنظیم می‌کند:

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

آزمایش کنید

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

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

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

آزمایش کنید

مثال 3

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

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

آزمایش کنید

قوانین CSS

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

مقدار ویژگی

مقدار توضیح
auto مقدار پیش‌فرض. مرورگر پادپایه را محاسبه می‌کند.
length

با استفاده از واحد‌های px، pt، cm و غیره scroll-padding-block را مشخص کنید.

نمی‌توان از مقادیر منفی استفاده کرد. لطفاً به:واحدهای CSS.
% پادپایه‌های شامل درصد عرض عنصر را مشخص می‌کند.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial.
inherit این ویژگی را از عنصر پدر خود ارث می‌برد. به: inherit.

جزئیات فنی

مقدار پیش‌فرض: auto
ارث‌پذیری: خیر
انیمیشن‌سازی: پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
قوانین جاوااسکریپت: object.style.scrollPaddingBlock="20px"

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 15.0 56.0

صفحات مرتبط

ارجاع:ویژگی scroll-padding-block-end CSS

ارجاع:ویژگی scroll-padding-block-start CSS

ارجاع:ویژگی scroll-snap-align CSS

ارجاع:ویژگی scroll-snap-type CSS

ارجاع:ویژگی writing-mode CSS