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

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

ویژگی scroll-margin-block-end پرپرٹی اس فاصلے کو بلاک ڈائریکشن پر، آگے کی رکھائی کی جانے والی دوسری سمت اور کانٹینر کے درمیان نکالتا ہے۔

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

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

تعریف می‌شود.

موقعیت چسبندگی به موقعیتی اطلاق می‌شود که وقتی شما رولش را متوقف می‌کنید، عنصر فرزند در داخل پوشش‌دهنده به آن موقعیت می‌چسبد.توجه: scroll-snap-align این ویژگی تنها در جهت بلوک مؤثر است.

ویژگی‌ها به حالت 'end' تنظیم شوند تا مؤثر باشند. ویژگی scroll-margin-block-end ویژگی‌ها، و برای مشاهده تأثیر آن‌ها، باید در عنصر فرزند تنظیم شوند ویژگی scroll-margin-block-end و scroll-snap-align ویژگی‌ها، و در عنصر والد تنظیم می‌شود ویژگی scroll-snap-type مشابهند.

ویژگی‌های CSS scroll-margin-inline و scroll-margin-block ویژگی‌ها با ویژگی‌های CSS CSS سیکل-مارگن-تاپ پرپرتیوscroll-margin-bottomوscroll-margin-left و scroll-margin-right بسیار مشابه، اما scroll-margin-block و scroll-margin-inline ویژگی وابسته به جهت بلوک و جهت خطی است.

مثال

مثال 1

در جهت بلوک، موقعیت هم‌ترازی با حاشیه خارجی پوشش‌دهنده را به 20px تنظیم می‌کند:

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

آزمایش کنید

مثال 2

وقتی <div> عنصر writing-mode وقتی ویژگی value به vertical-rl تنظیم شود، جهت بلوک از راست به چپ است. نتیجه این است که انتهای عنصر از پایین به چپ حرکت می‌کند:

div {
  scroll-margin-block-end: 50px;
  writing-mode: vertical-rl;
}

آزمایش کنید

آموزش CSS:

scroll-margin-block-end: 0|value|initial|inherit;

مقدار ویژگی

مقدار توضیح
0 پیش‌فرض. فاصله scroll-margin-block-end پیش‌فرض عنصر.
length

مقدار فاصله مشخص شده با واحد px، pt، cm و غیره است. مقدار منفی مجاز است.

لطفاً به:سی ایس ایس یونٹ.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. ببینید: initial.
inherit این ویژگی را از عنصر والد خود ارث می‌برد. ببینید: inherit.

جزئیات فنی

مقدار پیش‌فرض: 0
وارثی: خیر
انیمیشن: پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
آموزش جاوااسکریپت: object.style.scrollMarginBlockEnd="20px"

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

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

کروم ایج فایرفاکس سافری آپرا
69.0 79.0 68.0 14.1 56.0

مربوط صفحات

مطالبه:CSS سیکل-نپ-الائن پرپرتی

مطالبه:CSS سیکل-نپ-ٹائپ پرپرتی

مطالبه:CSS writing-mode پراگرام