ویژگی scroll-padding-bottom CSS

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

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

موقعیت جذب به موقعیت جذب فرزند درون محفظه هنگامی که شما به رول کردن متوقف می‌شوید، اطلاق می‌شود. موقعیت جذب از طریق scroll-snap-align تنظیمات ویژگی، اما ممکن است تحت تأثیر ویژگی‌های CSS نیز قرار گیرد direction و writing-mode تأثیر.

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

ببینید scroll-padding-bottom ویژگی تنظیم شود تا تأثیر scroll-snap-align ویژگی، و باید در عنصر والد scroll-padding-bottom و scroll-snap-type ویژگی.

مثال

مثال 1

پدینگ اسکرول از پایین محیط به موقعیت جذب 20px تنظیم شود:

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

آزمایش کنید

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

در تصاویر گالری‌هایی که جذب دارند، می‌توان از scroll-padding-bottom ویژگی تصویر را به عناصر ثابت بالا می‌برد:

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

آزمایش کنید

مثال 3: تنظیم پدینگ اسکرول پایین

هنگامی که جذب در دو جهت تنظیم می‌شود، می‌توانید در داخل محیط نیز scroll-padding-bottom ویژگی. به عناصر بعدی با استفاده از اسکرول عمودی نگاه کنید تا تأثیر را ببینید:

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

آزمایش کنید

مثال 4: موقعیت جذب

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

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

آزمایش کنید

جمله‌بندی CSS

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

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

ارجاع:خصوصیت direction CSS

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

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

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