CSS scroll-margin-block کا اپریشن
- پچھلے پیمانہ scroll-margin
- پائیدھی پیمانہ scroll-margin-block-end
تعریف و استفاده
scroll-margin-block این حیثیت فاصله بین موقعیت چسبندگی (snap position) و قالب در جهت بلوک را مشخص می‌کند.
این به معنای آن است که هنگامی که شما رول را متوقف می‌کنید، رول به سرعت تنظیم شده و در فاصله مشخص شده بین موقعیت چسبندگی در جهت بلوک و قالب متوقف می‌شود.
جهت بلوک به معنای قرارگیری سطر بعدی در مقایسه با موقعیت سطر فعلی است، این نیز روش قرارگیری عناوین دارای CSS display: block; مانند عناوین <p> و <div> در صفحه است. جهت بلوک بستگی به زبان نوشتاری دارد، به عنوان مثال، در زبان مغولی سطرهای جدید از چپ به راست قرار می‌گیرند، بنابراین جهت بلوک نیز از چپ به راست است، در حالی که در صفحات انگلیسی جهت بلوک به سمت پایین است. جهت بلوک می‌تواند از طریق حیثیت CSS writing-mode تعریف می‌شود.
موقعیت چسبندگی به معنای موقعیت چسبندگی عناصر فرزند در داخل قالب هنگامی است که شما رول را متوقف می‌کنید.
توجه داشته باشید:این حیثیت تنها در جهت بلوک ویژگی، برای مشاهده این حیثیت زمانی معتبر است که حیثیت تنظیم شده به 'start' یا 'end' باشد.
scroll-margin-block این حیثیت یک حیثیت کوتاه شده برای حیثیت‌های زیر است:
scroll-margin-block مقدار حیثیت می‌تواند از طریق روش‌های مختلف تنظیم شود:
اگر scroll-margin-block حیثیت دو مقدار دارد:
scroll-margin-block: 10px 50px;
- 开始处的距离为 10px
- scroll-margin-block: 10px 50px;
فاصله در ابتدا 10px است
scroll-margin-block: 10px;
- فاصله در انتهای 50px است
اگر scroll-margin-block ویژگی یک مقدار داشته باشد: scroll-margin-block فاصله در ابتدا و انتهای 10px است scroll-margin-block و ویژگی، برای مشاهده ویژگی scroll-snap-align ویژگی، و باید در عنصر والد تنظیم شود ویژگی.ویژگی scroll-snap-type
ویژگی‌های CSS scroll-margin-inline و scroll-margin-block ویژگی‌ها با ویژگی‌های CSS CSS scroll-margin-top کی خاصیت،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;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| 0 | پیش‌فرض. مقدار پیش‌فرض scroll-margin-block عنصر. |
| length |
فاصله‌ای که با استفاده از واحد‌های px، pt، cm و غیره مشخص می‌شود. مقدار منفی مجاز است. لطفاً به:سی ای ایس یونٹ. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial. |
| inherit | این ویژگی را از عنصر والد خود ارث می‌برد. به: inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | 0 |
|---|---|
| نوع ارث: | خیر |
| انیمیشن‌سازی: | پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| آموزش نحوی جاوااسکریپت: | object.style.scrollMarginBlock="20px" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه مرورگر اولین هستند که این ویژگی را کامل پشتیبانی می‌کند.
| کروم | ایج | فایرفاکس | سافاری | آپرا |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
متعلقہ صفحات
مراجع:CSS scroll-margin-block-end کا اپریشن
مراجع:CSS scroll-margin-block-start کا اپریشن
مراجع:CSS scroll-snap-align کی خاصیت
- پچھلے پیمانہ scroll-margin
- پائیدھی پیمانہ scroll-margin-block-end
