ویژگی scroll-padding-left CSS

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

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

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

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

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

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

مثال

مثال 1

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

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

آزمایش کنید

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

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

#container > img {
  scroll-padding-left: 30px;
}

آزمایش کنید

مثال 3: تنظیم فضای داخلی رول در سمت چپ

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

#container > div {
  scroll-padding-left: 30px;
}

آزمایش کنید

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

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

#container {
  direction: rtl;
  scroll-padding-left: 30px;
}
#container > div {
  scroll-snap-align: none start;
}

آزمایش کنید

آموزش زبان CSS

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

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

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

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

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

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