ویژگی scroll-margin-block-start CSS
- صفحه قبل scroll-margin-block-end
- صفحه بعدی scroll-margin-bottom
تعریف و استفاده
ویژگی scroll-margin-block-start ویژگی مشخص می‌کند که فاصله بین مکان جذب در جهت بلوک و محفظه چقدر است.
این به این معناست که وقتی شما اسکرول را متوقف می‌کنید، اسکرول به سرعت تنظیم شده و در مکان جذب اولین عنصر فرزند در جهت بلوک با فاصله مشخص شده بین آن مکان و محفظه متوقف می‌شود.
موقعیت‌گیری بلوک به معنای قرارگیری یک سطر جدید در مقایسه با سطر موجود است، این نیز روش قرارگیری برچسب‌هایی است که CSS display: block; دارند (مانند برچسب‌های <p> و <div>) در ترتیب صفحه. موقعیت‌گیری بلوک بستگی به زبان نوشتاری دارد، به عنوان مثال، در زبان مونگولی سطرهای جدید از چپ به راست قرار می‌گیرند، بنابراین موقعیت‌گیری بلوک از چپ به راست است، در حالی که در صفحات انگلیسی موقعیت‌گیری بلوک به سمت پایین است. موقعیت‌گیری بلوک می‌تواند از طریق ویژگی CSS تنظیم شود writing-mode 定义。
تعریف می‌شود.
موقعیت‌گیری به معنای این است که وقتی شما اسکرول را متوقف می‌کنید، عنصر فرزند در داخل جعبه به موقعیت خاصی جذب می‌شود.توجه: scroll-snap-align این ویژگی تنها در جهت بلوک
ویژگی‌ها به مقدار 'start' تنظیم شوند. ویژگی scroll-margin-block-start ویژگی‌ها، برای مشاهده ویژگی scroll-margin-block-start و 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-start: 20px;
}
مثال 2
وقتی <div> عنصر writing-mode وقتی ویژگی value به vertical-rl تنظیم شود، جهت بلوک از راست به چپ است. نتیجه این است که بخش شروع عنصر به سمت راست حرکت می‌کند:
div {
scroll-margin-block-start: 50px;
writing-mode: vertical-rl;
}
نوع CSS
scroll-margin-block-start: 0|value|initial|inherit;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| 0 | پیش‌فرض. فاصله scroll-margin پیش‌فرض عنصر. |
| length |
مقدار فاصله را به صورت px،pt،cm و غیره مشخص کنید. مقدار منفی مجاز است. لطفاً به:واحدهای CSS. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial. |
| inherit | این ویژگی را از عنصر والد خود ارث می‌برد. به: inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | 0 |
|---|---|
| ارث‌پذیری: | خیر |
| انیمیشن‌سازی: | پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| نوع جاوااسکریپت: | object.style.scrollMarginBlockStart="20px" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه مرورگر اولیه‌ای است که این ویژگی را کاملاً پشتیبانی می‌کند.
| کروم | اندروید | افرکس | سفاری | آپرا |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
صفحات مرتبط
منبع:ویژگی scroll-snap-align CSS
- صفحه قبل scroll-margin-block-end
- صفحه بعدی scroll-margin-bottom
