ویژگی scroll-margin CSS

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

scroll-margin این속عت فاصله بین موقعیت چسبندگی و کانتینر را مشخص می‌کند.

این به این معناست که وقتی شما رولینگ را متوقف می‌کنید، رولینگ به سرعت تنظیم شده و در فاصله مشخص شده بین موقعیت چسبندگی (snap position) و کانتینر متوقف می‌شود.

موقعیت چسبندگی به موقعیتی اطلاق می‌شود که عناصر فرزین در حالت توقف رولینگ، در داخل کانتینر به موقعیت چسبندگی می‌رسند.

scroll-margin این속عت یک سرآغازی برای موارد زیر است:

scroll-margin مقدارهای این속عت می‌توانند به روش‌های مختلف تنظیم شوند:

اگر속عت margin چهار مقدار دارد:

scroll-margin: 15px 30px 60px 90px;
  • فاصله بالا 15px است
  • فاصله راست 30px است
  • فاصله پایین 60px است
  • فاصله چپ 90px است

اگر속عت margin سه مقدار دارد:

scroll-margin: 15px 30px 60px;
  • فاصله بالا 15px است
  • فاصله‌های دو سمت چپ و راست به اندازه 30px هستند
  • فاصله پایین 60px است

اگر속عت margin دو مقدار دارد:

scroll-margin: 15px 30px;
  • فاصله‌های بالا و پایین به اندازه 15px هستند
  • فاصله‌های دو سمت چپ و راست به اندازه 30px هستند

اگر scroll-margin ویژگی یک مقدار داشته باشد:

scroll-margin: 10px;
  • فاصله‌های چهار سمت به اندازه 10px هستند

برای مشاهده scroll-margin ویژگی‌ها باید در عنصر فرزند تنظیم شود تا بتوان آن‌ها را مشاهده کرد scroll-margin و scroll-snap-align ویژگی و تنظیم آن در عنصر والد، اثر تنظیم scroll-snap-type ویژگی.

توجه:در مثال‌های زیر، فاصله‌های بیرونی لغزنده برای همه چهار سمت تنظیم شده است، اما به دلیل scroll-snap-align ویژگی به "start" تنظیم شده است، بنابراین تنها فاصله‌های بیرونی عمودی تغییر کرده و رفتار لغزنده تغییر کرده است.

مثال

مثال 1

تنظیم فاصله‌های بیرونی لغزنده بین مکان چسبنده و مخزن به 20px:

div {
  scroll-margin: 20px;
}

آزمایش کنید

مثال 2: کتابخانه تصویر

scroll-margin این ویژگی می‌تواند در کتابخانه‌های تصویر با رفتار چسبنده استفاده شود. در اینجا،scroll-margin به کاربر اجازه می‌دهد تا ببیند که در سمت چپ یک تصویر دیگر نیز وجود دارد. با لغزیدن از تصویر اول، اثر را می‌توان مشاهده کرد:

#container > img {
  scroll-margin: 0 0 0 30px;
}
بیتینگ رقصنده ووهان تولیپ هانگژو

آزمایش کنید

مثال 3: تنظیم فاصله‌های بیرونی لغزنده پایین و سمت راست

می‌توان در پایین و سمت راست عنصر تنظیم کرد scroll-margin ویژگی. با حرکت افقی و عمودی به سمت عناصر بعدی، اثر را می‌توان مشاهده کرد:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





آزمایش کنید

قوانین CSS

scroll-margin: 0|value|initial|inherit;

مقدار ویژگی

مقدار توضیح
0 فاصله‌های بیرونی لغزنده به صفر. مقدار پیش‌فرض.
length

تعیین فاصله‌های بیرونی لغزنده با استفاده از واحد‌های px، pt، cm و غیره. از مقادیر منفی نیز می‌توان استفاده کرد.

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

جزئیات فنی

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

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

صفحات مرتبط

منبع:ویژگی scroll-margin-bottom CSS

منبع:ویژگی scroll-margin-left CSS

منبع:ویژگی scroll-margin-right CSS

منبع:ویژگی scroll-margin-top CSS

منبع:ویژگی scroll-snap-align CSS

منبع:ویژگی scroll-snap-type CSS