CSS scroll-margin کی خاصیت

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

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

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

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

scroll-margin این ویژگی یک نمونه‌کوتاه از ویژگی‌های زیر است:

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

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

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

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

scroll-margin: 15px 30px 60px;
  • فاصله بالا 15px
  • 左右两侧距离为 30px
  • فاصله پایین 60px

اگر scroll-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

مربوط صفحات

ملاحظات:CSS scroll-margin-bottom کا اپریشن

ملاحظات:CSS scroll-margin-left کا اپریشن

ملاحظات:CSS scroll-margin-right کا اپریشن

ملاحظات:CSS scroll-margin-top کا اپریشن

ملاحظات:CSS scroll-snap-align کا اپریشن

ملاحظات:CSS scroll-snap-type کا اپریشن