CSS scroll-margin-bottom کا پروپرٹی

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

scroll-margin-bottom خصوصیت مشخص می‌کند که فاصله بین مکان جذب و ظرف چقدر است.

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

موقعیت چسبندگی از طریق scroll-snap-align تنظیم شده باشد، اما ممکن است تأثیر CSS ویژگی‌های ویژگی و writing-mode تأثیر.

توجه:این ویژگی تنها هنگامی معتبر است که موقعیت چسبندگی در پایین عنصر فرزند تنظیم شده باشد.

برای دیدن scroll-margin-bottom ویژگی‌ها را تنظیم کنید، اما ممکن است تأثیر CSS ویژگی‌های scroll-margin-bottom و scroll-snap-align ویژگی را در فرزند تنظیم کرده و در عنصر پدر scroll-snap-type ویژگی.

مثال

مثال 1

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

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

آزمایش کنید

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

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

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

آزمایش کنید

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

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

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-bottom: 30px;
  scroll-snap-align: end none;
}

آزمایش کنید

آموزش CSS:

scroll-margin-bottom: 0|مقدار|مقدار اولیه|ترتیب‌دهی;

مقدار ویژگی

مقدار توضیح
0 لبه پایین اسکرول بی‌نقص است. این مقدار پیش‌فرض است.
طول

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

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

جزئیات فنی

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

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

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

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

مربوط صفحات

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

مشارکت:CSS scroll-snap-align کا پروپرٹی

مشارکت:CSS scroll-snap-type کا پروپرٹی

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