ویژگی scroll-margin-right CSS

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

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