ویژگی scroll-margin-block-end CSS
- صفحه قبل scroll-margin-block
- صفحه بعدی scroll-margin-block-start
تعریف و استفاده
ویژگی scroll-margin-block-end ویژگی مشخص می‌کند که فاصله بین مکان قرارگیری و جعبه در مقیاس بلاک.
این به این معناست که وقتی شما اسکرول را متوقف می‌کنید، اسکرول به سرعت تنظیم شده و در مکان جذب مشخص شده بین مکان پایان عنصر فرزند در مقیاس بلاک و جعبه، متوقف می‌شود.
مقیاس بندی بلاک به معنای مکان قرارگیری سطر بعدی نسبت به سطر موجود است، مسیر قرارگیری سطر بعدی. این همچنین روش قرارگیری برچسب‌هایی است که دارای CSS display: block; هستند (مانند برچسب‌های <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 ویژگی scroll-margin-top 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 و غیره مشخص کنید. مقدار منفی مجاز است. لطفاً به:واحدهای CSS. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial. |
| inherit | این ویژگی را از عنصر والد خود ارث می‌برد. به: inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | 0 |
|---|---|
| وراثت: | خیر |
| انیمیشن‌سازی: | پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| آموزش دستور زبان جاوااسکریپت: | object.style.scrollMarginBlockEnd="20px" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه مرورگر اولیه‌ای است که این ویژگی را کامل پشتیبانی می‌کند.
| کروم | اچ‌پی | فایرفاکس | سفاری | опера |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
صفحات مرتبط
منبع:ویژگی scroll-snap-align CSS
- صفحه قبل scroll-margin-block
- صفحه بعدی scroll-margin-block-start
