CSS scroll-margin-right کا حصہ

مفهوم و کاربرد

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 و غیره به وسیله واحد مشخص کنید. مقدار منفی نیز قابل استفاده است.

لطفاً به:سی ایس ایس یونٹ.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. به: initial.
inherit این ویژگی را از عنصر والد خود ارث می‌برد. به: inherit.

جزئیات فنی

مقدار پیش‌فرض: 0
وراثت: خیر
انیمیشن‌سازی: پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
آموزش زبان جاوااسکریپت: object.style.scrollMarginRight="20px"

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

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

کروم ایج فایرفاکس سافاری آپرا
69.0 79.0 68.0 14.1 56.0

مرتبط صفحاتCSS دیکشن کا نمائش

مرتبط صفحاتCSS scroll-snap-align کا حصہ

مرتبط صفحاتCSS scroll-snap-type کا حصہ

مرتبط صفحاتCSS writing-mode کی پرنسیپ