ویژگی scroll-padding CSS

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

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

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

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

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

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

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

scroll-padding: 15px 30px 60px 90px;
  • فاصله بالا 15 پیکسل است
  • فاصله راست 30 پیکسل است
  • فاصله پایین 60 پیکسل است
  • فاصله چپ 90 پیکسل است

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

scroll-padding: 15px 30px 60px;
  • فاصله بالا 15 پیکسل است
  • فاصله در سمت چپ و راست 30px است
  • فاصله پایین 60 پیکسل است

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

scroll-padding: 15px 30px;
  • فاصله بالا و پایین 15 پیکسل است
  • فاصله در سمت چپ و راست 30px است

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

scroll-padding: 10px;
  • فاصله در همه چهار جهت 10px است

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

توجه:در مثال زیر، پادروسیتی اسکرول برای همه جهات تنظیم شده است، اما به دلیل scroll-snap-align به "start" تنظیم شده است، بنابراین تنها پادروسیتی سمت بالا تغییر می‌کند.

مثال

مثال 1

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

div {
  scroll-padding: 20px;
}

آزمایش کنید

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

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

#container {
  scroll-padding: 30px 0 0 0;
}
عناصر ثابت بالایی
پکن رقصنده ووهان گل رز هانگژو

آزمایش کنید

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

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

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





آزمایش کنید

نوع CSS

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

مقدار ویژگی

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

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

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

جزئیات فنی

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

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

صفحات مرتبط

مراجعه:ویژگی scroll-padding-bottom CSS

مراجعه:ویژگی scroll-padding-left CSS

مراجعه:ویژگی scroll-padding-right CSS

مراجعه:ویژگی scroll-padding-top CSS

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

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