CSS scroll-padding-block-start کا اپریشن
- پچھلی پیج اسکرول-پیڈدنگ-بلوک-ایند
- نئی پیج اسکرول-پیڈدنگ-بوتوم
تعلیم اور استعمال
scroll-padding-block-start پرپریئٹی بلاک ڈائریکشن پر، کانٹینر کی شروعاتی جگہ سے بیٹی عنصر کی آسودگی جگہ تک کی فاصلہ کا تعین کرتی ہے。
یہ معنیات سے واضح ہوتا ہے کہ جب آپ اسکرول کو بند کردیں تو اسکرول تیزی سے تیزی سے بند ہوجائے گا اور بلاک ڈائریکشن پر، کانٹینر اور آسودگی کی جگہ کے درمیان مخصوص فاصلے پر بند ہوجائے گا。
بلاک ڈائریکشن موجودہ سارن کے سلسلے میں کا مقام ہوتا ہے، اگلے سارن کو رکھنے کا سمت ہوتا ہے۔ یہ بلاک ڈائریکشن کا استعمال کئی تگوں (جیسے <p> اور <div> تگ) کی صفحہ پر لگائی جانے کا طریقہ ہوتا ہے۔ بلاک ڈائریکشن مکتبہ زبان کا تعین کرتا ہے، مثلاً، منگولی زبان میں نئی سطر چپ سمت سے بندھی جاتی ہے، لہذا بلاک ڈائریکشن چپ سمت سے بندھی جاتی ہے، جبکہ انگریزی صفحہ کا بلاک ڈائریکشن پائیدار ہوتا ہے۔ بلاک ڈائریکشن کو سی ایس ایس پرپریئٹی کے ذریعے تعین کیا جاسکتا ہے، مثلاً، writing-mode برای تعریف میآید.
برای تعریف میآید.
موقعیت چسبندگی به موقعیتی اشاره دارد که عناصر فرزند در محفظه چسبیده میشوند وقتی که شما رول را متوقف میکنید.توجه: scroll-snap-align این ویژگی تنها در مسیر بلوک
ویژگی به 'start' تنظیم شود. scroll-padding-block-start ویژگی را در عنصر والد تنظیم کنید، و برای مشاهده اثر آن باید scroll-snap-align ویژگی، و باید ویژگی scroll-padding-block-start و scroll-snap-type ویژگی.
مثال
مثال 1
پادپایه مسیر بلوک بین موقعیت شروع محفظه و موقعیت چسبندگی را به 20px تنظیم میکند:
div {
scroll-padding-block-start: 20px;
}
مثال 2: کتابخانه تصاویر
در یک گالری تصاویر با رفتار چسبندگی میتوان از scroll-padding-block-start ویژگی تصویر را به زیر عنصر ثابت میکشد:
#container {
scroll-padding-block-start: 30px;
}
مثال 3
وقتی عنصر محفظه writing-mode وقتی مقدار ویژگی به vertical-rl تنظیم شود، موقعیت شروع محفظه در مسیر بلوک و عناصر فرزند از بالا به سمت راست حرکت میکنند. این بر رفتار چسبندگی و scroll-padding-block-start روش کارکردن ویژگی:
#container {
scroll-padding-block-start: 20px;
writing-mode: vertical-rl;
}
جملهبندی CSS
scroll-padding-block-start: خودکار|مقدار|مقدار اولیه|وراثت;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| خودکار | مقدار پیشفرض. مرورگر پادپایه را محاسبه میکند. |
| طول |
مقدار scroll-padding-block-start را به واحدهای px، pt، cm و غیره تعیین کنید. مقدار منفی مجاز نیست. لطفاً به:سی ایس ایس اکائیاں. |
| % | پادپایه را بهصورت درصد از عرض عنصر در نظر میگیرد. |
| مقدار اولیه | این ویژگی را به مقدار پیشفرض خود تنظیم کنید. به: مقدار اولیه. |
| وراثت | این ویژگی را از عنصر والد خود ارث میبرد. به: وراثت. |
جزئیات فنی
| مقدار پیشفرض: | خودکار |
|---|---|
| وراثت: | خیر |
| انیمیشنسازی: | پشتیبانی نمیشود. لطفاً به:ویژگیهای مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| جملهبندی جاوااسکریپت: | object.style.scrollPaddingBlockStart="20px" |
پشتیبانی مرورگر
اعداد در جدول نشاندهنده نسخه مرورگر اولیهای هستند که این ویژگی را کامل پشتیبانی میکند.
| کروم | ایج | فایرفاکس | سافاری | آپرا |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 15.0 | 56.0 |
مرتبط پیج
مراجع:CSS scroll-snap-align کا اپریشن
مراجع:CSS scroll-snap-type کا اپریشن
مراجع:کیس وریٹنگ-مود اپریٹر
- پچھلی پیج اسکرول-پیڈدنگ-بلوک-ایند
- نئی پیج اسکرول-پیڈدنگ-بوتوم
