ویژگی scroll-margin-left CSS

تعریف و کاربرد

scroll-margin-left 属性指定吸附位置与容器之间的距离。

吸附位置是指子元素在停止滚动时，其在容器中固定到位的位置。吸附位置通过 و ویژگی مشخص می‌شود direction ویژگی‌ها را در عنصر فرزند تنظیم کنید تا بتوانید ببینید موقعیت چسبندگی به موقعیتی اشاره دارد که عنصر فرزند در هنگام توقف رولینگ در محفظه به آنجا ثابت می‌شود. موقعیت چسبندگی از طریق تنظیم شده است، اما ممکن است تحت تأثیر ویژگی‌های CSS دیگر نیز قرار گیرد

ویژگی writing-modeتأثیر.

توجه داشته باشید: scroll-margin-left این ویژگی تنها زمانی معتبر است که موقعیت چسبندگی در لبه چپ عنصر فرزند تنظیم شده باشد. scroll-margin-left ویژگی‌ها را در عنصر فرزند تنظیم کنید تا بتوانید ببینید و در عنصر فرزند تنظیم شده است و تأثیر ویژگی scroll-snap-align ویژگی scroll-snap-type ویژگی.

مثال

مثال 1

موقعیت چسبندگی و لبه خارجی رولینگ بین محفظه و پوشه را 20px تنظیم کنید:

div {
  scroll-margin-left: 20px;
}

آزمایش کنید

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

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

#container > img {
  scroll-margin-left: 30px;
}

آزمایش کنید

مثال 3: موقعیت چسبندگی

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

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-left: 30px;
  scroll-snap-align: none start;
}

آزمایش کنید

نحوه استفاده از CSS

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

مقدار ویژگی

مقدار توضیح
0 لبه خارجی رولینگ چپ به مقدار 0 است. مقدار پیش‌فرض.
length

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

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

جزئیات فنی

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

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

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

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

صفحات مرتبط

ارجاع:ویژگی direction CSS

ارجاع:ویژگی scroll-snap-align CSS

ارجاع:ویژگی scroll-snap-type CSS

ارجاع:ویژگی writing-mode CSS