CSS scroll-padding-block-end کا اپریشن

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

scroll-padding-block-end یہ پرزنٹیج بلاک ڈائریکشن پر، کانٹینر کے آخری سر سے بچوں کی جذب پوزیشن تک کی دوری کا تعین کرتا ہے۔

یہ کہتا ہے کہ جب آپ اسکرول کرنا بند کرتے ہیں تو اسکرول تیزی سے تیزی سے جائز کی جائیگی، اور بلاک ڈائریکشن پر، کسی جذب پوزیشن اور کانٹینر کے درمیان مخصوص فاصلے پر رک جائیگی۔

بلاک ڈائریکشن موجودہ سروئیر کے سلسلے میں کی جگہ، اگلے سروئیر کو رکھنے کی سمت کا کہلا ہوتا ہے۔ یہ بلاک ڈائریکشن کا ایک ایسا بجٹنگ طریقہ ہوتا ہے جس میں CSS دیسپلے: بلاک; کا استعمال کیا جاتا ہے (مثلاً <p> اور <div> تگوں) پینج پر کیس میں کیس میں بجٹنگ کی جاتی ہے۔ بلاک ڈائریکشن کسی لکھنے کی زبان کے مطابق کیا جاتا ہے، مثلاً، منگولی زبان میں نئی سطر بائیں سمت سے راست کی جاتی ہے، لہذا بلاک ڈائریکشن بائیں سمت سے راست ہوتا ہے، جبکہ انگریزی پیج کا بلاک ڈائریکشن نیچے کی سمت سے ہوتا ہے۔ بلاک ڈائریکشن کا کسی CSS پرزنٹیج کے ذریعے پتہ لگایا جاسکتا ہے، مثلاً، writing-mode برای تعریف.}

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

توجه داشته باشید:این ویژگی تنها در مسیر بلاک scroll-snap-align ویژگی به 'end' تنظیم شود.

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

مثال

مثال 1

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

div {
  scroll-padding-block-end: 20px;
}

آزمایش کنید

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

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

#container {
  scroll-padding-block-end: 30px;
}

آزمایش کنید

مثال 3

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

#container {
  scroll-padding-block-end: 20px;
  writing-mode: vertical-rl;
}

آزمایش کنید

آموزش CSS:

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

مقدار ویژگی

جزئیات فنی

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

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

مستندات مرتبط

مراجع:CSS scroll-snap-align کا اپریشن

مراجع:CSS scroll-snap-type کا اپریشن

مراجع:CSS writing-mode کا اپریشن