CSS scroll-padding-inline کا پیراگراف

کورس سفارش:

scroll-padding-inline تعریف و استعمال

پارامتر سیٹ کیا جاسکتا ہے

این لائن دا معنائش یعنی جب آپ اس پر رول کا کارروائی کرتے ہیں تو، رول بچتار کا مقام اور بندرگاہ کے درمیان سیٹ کی گئی دوری کی جگہ پر تیزی سے ساگرتا اور رک جاتا ہے。 direction و writing-mode سیٹ کیا جاسکتا ہے

تقریب کی دوری کا معنائش یعنی جب آپ اس پر رول کا کارروائی کرتے ہیں تو، رول بچتار کا مقام اور بندرگاہ کے درمیان سیٹ کی گئی دوری کی جگہ پر تیزی سے ساگرتا اور رک جاتا ہے。

کوئیٹ کی کی دوری یعنی جب آپ اس پر رول کا کارروائی کرتے ہیں تو، بچوں عنصر جس کا پانی کا بندرگاہ بچتار کا مقام پر پائیدار رہتا ہے،تذکرہ:scroll-snap-align اتنی ہی کا جانب سے،

جب پارامتر کا کا اعداد 'start' یا 'end' پر سیٹ کیا جاتا ہے تو اس کا اثر مضبوط ہوتا ہے

• scroll-padding-inline پارامتر درج ذیل پارامتروں کا کوتا حرف پارامتر ہے:
• scroll-padding-inline-end

scroll-padding-inline scroll-padding-inline-start

پارامتر کا کا اعداد کا مقصد مختلف طریقوں سے سیٹ کیا جاسکتا ہے:

اگر scroll-padding-inline پارامتر میں دو کا اعداد دیا گیا ہوا:

• scroll-padding-inline: 10px 50px;
• بینیار کی دوری 10 پی ایکس سے ہوتی ہے

خاتمے کی دوری 50 پی ایکس سے ہوتی ہے

اگر scroll-padding-inline پارامتر میں ایک کا اعداد دیا گیا ہوا:

• scroll-padding-inline: 10px;

بینیار اور خاتمے کی دوری 10 پی ایکس سے ہوتی ہے scroll-padding-inline پارامتر کا ایفیکٹ دیکھنا چاہیے، تو ان کی جانب سے اس پر سیٹ کرنا چاہیے scroll-snap-align پارامتر، اور والد عنصر پر اسٹیل کا ایفیکٹ scroll-padding-inline و scroll-snap-type پارامتر。

CSS کا scroll-padding-block و scroll-padding-inline کوئئیتی کا پارامتر اور CSS کا پارامتر CSS scroll-padding-top کا پیراگراف、scroll-padding-bottom、scroll-padding-left و scroll-padding-right بسیار مشابه هستند، اما scroll-padding-block و scroll-padding-inline این ویژگی به بُعد مستقیم و بُعد خطی وابسته است.

مثال

مثال 1

تنظیم پادروسیه داخلی در جهت خطی، از محفظه به موقعیت چسبندگی به 20px:

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

آزمایش کنید

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

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

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

آزمایش کنید

مثال 3

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

#container {
  scroll-padding-inline: 20px 0;
  writing-mode: vertical-rl;
}

آزمایش کنید

مثال 4

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

#container {
  scroll-padding-inline: 20px 0;
  direction: rtl;
}

آزمایش کنید

قوانین CSS

scroll-padding-inline: خودکار|مقدار|مقدار اولیه|ترتیب‌دهی;

مقدار ویژگی

جزئیات فنی

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

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

مرتبط صفحات

مراجع:CSS دائرہ راست اٹری بیوٹ

مراجع:CSS scroll-snap-align کا پیراگراف

مراجع:CSS scroll-snap-type کا پیراگراف

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