CSS scroll-margin-left کا حصہ

دفع و کاربرد

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

موقعیت چسبندگی به موقعیتی اطلاق می‌شود که عنصر فرزین در توقف اسکرول در محفظه به آنجا ثابت می‌شود. موقعیت چسبندگی از طریق ویژگی scroll-snap-align تنظیم شود، اما ممکن است تأثیر CSS ویژگی‌های دیگر نیز داشته باشد direction و ویژگی 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 و غیره مشخص می‌شود. مقدار منفی نیز مجاز است.

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

جزئیات فنی

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

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

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

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

مربوط صفحات

مشارکت:CSS ڈائریکشن اپریشن

مشارکت:CSS scroll-snap-align کا حصہ

مشارکت:CSS scroll-snap-type کا حصہ

مشارکت:CSS writing-mode پراپرٹی