CSS scroll-padding-block کی خاصیت

تعلیم اور کاربرد

scroll-padding-block خصوصیت، بلک دکھانے کی رخ میں، کونٹینر سے فرزند عنصر کی گھومتی مقام کی دوری کا معین کرتا ہے

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

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

گھومتی مقام، یعنی جب آپ گھومنے کو روک دیتے ہیں تو فرزند عنصر کونٹینر میں گھومتی مقام پر آپادھار کرنے کا مقام ہوگا

توجہ دہانی:یہ خاصیت صرف بلک دکھانے کی رخ کی وجہ سےscroll-snap-align خصوصیت 'start' یا 'end' پر سیٹ ہونے پر موثر ہوتی ہے

scroll-padding-block خصوصیت یہ درج ذیل خصوصیات کی مختصر نمونہ ہے:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block خصوصیت کی کا جگہ مختلف طریقوں سے سیٹ کی جاسکتی ہے:

اگر scroll-padding-block کی خاصیت دو کی جگہ آئی ہو:

scroll-padding-block: 10px 50px;

• شروع کے مقام کی دوری 10 پی ایکس ہوتی ہے
• ختم کے مقام کی دوری 50 پی ایکس ہوتی ہے

اگر scroll-padding-block کی خاصیت کی ایک کا جگہ آئی ہو:

scroll-padding-block: 10px;

• شروع کے مقام اور ختم کے مقام کی دوری 10 پی ایکس ہوتی ہے

دیدنا چاہیئے scroll-padding-block نتیجہ کا اثر، فرزند عنصر پر سیٹ کرنا ہوگا scroll-snap-align scroll-snap-align scroll-padding-block و ویژگی، و در عنصر پدر آن را تنظیم کنید ویژگی 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-block: 20px;
}

آزمایش کنید

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

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

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

آزمایش کنید

مثال 3

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

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

آزمایش کنید

آموزش زبان CSS

scroll-padding-block: auto|مقدار|مقدار اولیه|وراثت;

مقدار ویژگی

جزئیات فنی

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

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

متعلقہ صفحات

مطالعه:CSS scroll-padding-block-end کی خاصیت

مطالعه:CSS scroll-padding-block-start کی خاصیت

مطالعه:CSS scroll-snap-align کی خاصیت

مطالعه:CSS scroll-snap-type کی خاصیت

مطالعه:CSS writing-mode کا اپریشن