ویژگی scroll-margin-block CSS

تعریف و استفاده

scroll-margin-block این ویژگی فاصله بین موقعیت چسبندگی (snap position) و محفظه در جهت بلوک را مشخص می‌کند.

این به معنای آن است که وقتی شما رول را متوقف می‌کنید، رول به سرعت تنظیم شده و در فاصله مشخصی بین موقعیت چسبندگی در جهت بلوک و محفظه متوقف می‌شود.

جهت بلوک به معنای قرار دادن خط بعدی در مقابل موقعیت خط فعلی است، این نیز روش قرارگیری برچسب‌هایی با CSS display: block; مانند برچسب‌های <p> و <div> در صفحه است. جهت بلوک بستگی به زبان نوشتاری دارد، به عنوان مثال، خطوط جدید در زبان مغولی از چپ به راست قرار می‌گیرند، بنابراین جهت بلوک نیز از چپ به راست است، در حالی که جهت بلوک در صفحات انگلیسی به سمت پایین است. جهت بلوک می‌تواند با استفاده از ویژگی CSS writing-mode تعریف می‌شود.

موقعیت چسبندگی به موقعیتی اشاره دارد که وقتی شما رول را متوقف می‌کنید، عنصر فرزند در داخل محفظه به موقعیت چسبندگی می‌رسد.

توجه داشته باشید:این ویژگی تنها در جهت بلوک scroll-snap-align این ویژگی هنگامی که مقدار آن به 'start' یا 'end' تنظیم شود، معتبر است.

• scroll-margin-block-start
• scroll-margin-block-end

scroll-margin-block مقدار این ویژگی می‌تواند به روش‌های مختلف تنظیم شود:

اگر属性 scroll-margin-block دو مقدار داشته باشد:

scroll-margin-block: 10px 50px;

• scroll-margin-block: 10px 50px;
• فاصله شروع 10px است

فاصله پایان 50px است

scroll-margin-block: 10px;

• اگر scroll-margin-block ویژگی یک مقدار داشته باشد:

فاصله‌های شروع و پایان هر دو 10px هستند scroll-margin-block ویژگی بر روی عنصر پدر تنظیم شود، برای دیدن scroll-margin-block و 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

فاصله‌ای که بین موقعیت چسبندگی و جعبه قابل رول‌کردن تنظیم می‌شود:

div {
  scroll-margin-block: 10px;
}

آزمایش کنید

مثال 2

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

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

آزمایش کنید

آموزش زبان CSS

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

مقدار ویژگی

جزئیات فنی

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

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

صفحات مرتبط

منبع:ویژگی scroll-margin-block-end CSS

منبع:ویژگی scroll-margin-block-start CSS

منبع:ویژگی scroll-snap-align CSS

منبع:ویژگی scroll-snap-type CSS

منبع:ویژگی writing-mode CSS