CSS سیکل-مارچ-تاپ کی اپریٹ

دفع و کاربرد

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

吸附位置是指子元素在停止滚动时，其在容器中固定到位的位置。吸附位置通过 scroll-snap-align 属性设置，但也可能受到 CSS 属性 direction 和 writing-mode 的影响。

注意：此属性仅在吸附位置设置在子元素的顶部时才有效。

要看到 scroll-margin-top 属性的效果，必须在子元素上设置 scroll-margin-top 和 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type 属性。

实例

例子 1

设置吸附位置与容器之间的顶部滚动外边距为 20px：

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

خود کا تجربہ کریں

例子 2：图片库

scroll-margin-top 属性可以在具有吸附行为的图片画廊中使用。在这里，scroll-margin-top 让用户知道顶部还有一张图片。滚动过第一张图片以查看效果：

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

خود کا تجربہ کریں

مثال 3: سمت چپ پر سمت چپ

تا کہ scroll-margin-top اترائی کا اثر، سمت چپ سمت راست پر سیٹ کی گئی ہے، بچے عنصر کی سمت چپ پر سیٹ کرنا ہوتا ہے. اس مثال میں،writing-mode اترائی کو ان کی بچے عنصر کی سمت چپ سے تبدیل کرکے سمت راست میں بدل دیا ہے. اس طرح کا کوڈ استعمال کریں،scroll-margin-top اترائی کا اثر دیکھیے:

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

خود کا تجربہ کریں

سی ایس ایس گرامر

scroll-margin-top: 0|مقدار|ابتدائی|وراثت;

اترائی کا مقدار

تکنیکی تفصیلات

براوزر کی مدد

جداول میں دوسرے سلسلے کا اعداد و شمار پہلی براہ راست اس ویژگی کا مددگار بروسر کی نسخہ کا اندازہ دیتا ہے。

متعلقہ صفحات

مشارکت:CSS دائرہ کلاس

مشارکت:CSS سیکل-نپ-الائن کی اپریٹ

مشارکت:CSS سیکل-نپ-ٹائپ کی اپریٹ

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