ویژگی scroll-margin-bottom CSS

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

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

吸附位置是指子元素在停止滚动时吸附到容器中的位置。

吸附位置通过 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction و 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|value|initial|inherit;

مقدار ویژگی

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

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

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

جزئیات فنی

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

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

صفحات مرتبط

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

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

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

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