CSS سیکل-پیداد-تاپ پرپرتی

تعلیم اور استعمال

scroll-padding-top خصوصیت کا معنی یہ ہے کہ کانٹینر کی سمت سے سدھارک بجلی کا جذب کی جگہ تک کی دوری کا تعین ہوتا ہے。

موقع جذب کا معنی یہ ہے کہ رولنگ کی جگہ پر، ذیلی عنصر کا مکان جس میں یہ کانٹینر میں جذب ہوتا ہے، کا مقام ہے。

موقعیت چسبندگی توسط}} scroll-snap-align تنظیم شوند، اما ممکن است تأثیر CSS属性 ویژگی‌های direction و 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|مقدار|مقدار اولیه|ارث‌پذیری;

مقدار ویژگی

جزئیات فنی

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

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

متعلقہ صفحات

مشارکت:CSS دائرہ مرئیت اپریشن

مشارکت:CSS سیکل-سناپ-الائن پرپرتی

مشارکت:CSS سیکل-سناپ-ٹائپ پرپرتی

مشارکت:CSS writing-mode کا لکھنہ طریقہ