ویژگی scroll-margin-right CSS
- صفحه قبل scroll-margin-left
- صفحه بعدی scroll-margin-top
تعریف و استفاده
scroll-margin-right
ویژگی مشخص میشود که فاصله بین موقعیت جذب و پوشه را مشخص میکند.
موقعیت جذب به موقعیتی اشاره دارد که عنصر فرزند در هنگام توقف اسکرول در پوشه به آن موقعیت ثابت میشود. موقعیت جذب با استفاده از scroll-snap-align
ویژگی تنظیم شود، اما ممکن است تأثیر CSS属性 direction
و writing-mode
تأثیر.
توجه:این ویژگی تنها زمانی معتبر است که موقعیت جذب در سمت راست عنصر فرزند تنظیم شده باشد.
برای دیدن scroll-margin-right
ویژگی را تنظیم کنید، اما ممکن است تأثیر CSS属性 scroll-margin-right
و scroll-snap-align
ویژگی را در فرزند تنظیم کرده و در عنصر پدر scroll-snap-type
ویژگی.
مثال
مثال 1
موقعیت جذب و حاشیه خارجی اسکرول بین اینجا و پوشه را به 20px تنظیم کنید:
div { scroll-margin-right: 20px; }
مثال 2: کتابخانه تصاویر
scroll-margin-right
ویژگی میتواند در گالریهای تصویری با رفتار جذب استفاده شود. در اینجا،scroll-margin-right
به کاربر بگویید که در سمت راست یک تصویر دیگر نیز وجود دارد. تصویر اول را اسکرول کنید تا تأثیر را ببینید:
#container > img { scroll-margin-right: 30px; }
مثال 3: موقعیت جذب
برای اینکه scroll-margin-right
ویژگی فعال میشود، موقعیت جذب باید در سمت راست عنصر فرزند تنظیم شود. در این مثال،direction
ویژگیهای جذب موقعیت از سمت راست عنصر فرزند به سمت چپ تغییر میکند. با استفاده از این کد،scroll-margin-right
ویژگیهای زیر دیگر کار نمیکنند:
#container { direction: rtl; } #container > div { scroll-margin-right: 30px; scroll-snap-align: none end; }
آموزش زبان CSS:
scroll-margin-right: 0|value|initial|inherit;
مقدار ویژگی
مقدار | توضیح |
---|---|
0 | حاشیه خارجی سمت راست اسکرول به 0 است. مقدار پیشفرض. |
length |
مقدار را با استفاده از واحدهای px،pt،cm و غیره برای حاشیه خارجی سمت راست اسکرول مشخص کنید. مقدار منفی نیز قابل استفاده است. لطفاً به:واحدهای CSS. |
initial | این ویژگی را به مقدار پیشفرض خود تنظیم میکند. به: initial. |
inherit | این ویژگی را از عنصر پدر خود ارث میبرد. به: inherit. |
جزئیات فنی
مقدار پیشفرض: | 0 |
---|---|
وراثت: | خیر |
انیمیشنسازی: | پشتیبانی نمیشود. لطفاً به:ویژگیهای مرتبط با انیمیشن. |
نسخه: | CSS3 |
آموزش زبان برنامهنویسی جاوااسکریپت: | object.style.scrollMarginRight="20px" |
پشتیبانی مرورگر
اعداد در جدول نشاندهنده نسخهی اولین مرورگر پشتیبان از این ویژگی هستند.
کروم | گرید | افراط | سفاری | اپرا |
---|---|---|---|---|
69.0 | 79.0 | 68.0 | 14.1 | 56.0 |
صفحات مرتبط
ارجاع:ویژگی direction CSS
ارجاع:ویژگی scroll-snap-align CSS
ارجاع:ویژگی scroll-snap-type CSS
ارجاع:ویژگی writing-mode CSS
- صفحه قبل scroll-margin-left
- صفحه بعدی scroll-margin-top