ویژگی scroll-padding-top CSS

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

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

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

موقعیت چسبنده توسط}} scroll-snap-align تنظیم شود، اما ممکن است تأثیر CSS属性 ویژگی و writing-mode تأثیر.

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

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

مثال

مثال 1

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

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

آزمایش کنید

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

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

#container {
  scroll-padding-top: 30px;
}

آزمایش کنید

مثال 3: تنظیم حاشیه داخلی اسکرول در بالا

هنگامی که عملیات چسبنده در دو جهت تنظیم شده است، می‌توانید درون کانتینر نیز scroll-padding-top ویژگی. به عناصر بعدی با حرکت عمودی به پایین نگاه کنید تا تأثیر را ببینید:

#container {
  scroll-padding-top: 30px;
}

آزمایش کنید

مثال 4: موقعیت چسبنده

برای اینکه scroll-padding-top ویژگی فعال می‌شود، موقعیت چسبنده باید روی بالا عنصر فرزند تنظیم شود. در این مثال،writing-mode ویژگی‌ها موقعیت چسبنده از بالا به سمت راست تغییر می‌دهد. هنگام استفاده از این کد،scroll-padding-top ویژگی‌هایی که دیگر کار نمی‌کنند:

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

آزمایش کنید

جمله‌بندی CSS

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

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

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

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

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

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