CSS scroll-padding-inline-end کی خاصیت

定义和用法

scroll-padding-inline-end 属性指定了从容器末端到子元素对齐位置之间在行内方向上的距离。

这意味着，当你停止滚动时，滚动将快速调整并停止在对齐位置与容器之间指定的距离处。

行内方向是指下一字符相对于现有字符在行中的位置放置的方向，这也是具有 CSS display: inline; 的标签（如 和 标签）在文本中的布局方式。行内方向取决于书写语言，例如阿拉伯语的新字符是从右到左排列的，因此行内方向是从右到左的，而英文页面的行内方向是从左到右的。行内方向可以通过 CSS 属性 direction 和 writing-mode تعریف

ترتیب نقطہ کا مطلب یہ ہے کہ جب آپ اسکرول کو روک دیتے ہیں تو ذیلی عنصر کا کجائی کا تعین کیا جاتا ہے جو اسکرول کا کاوان کے اندر آجائی کا تعین کیا جاتا ہے۔

توجہ:یہ اتربوت صرف scroll-snap-align اتрибوت کی سمت درون تنظیم کی جائیں تو اپنا کردار اپنا لیتا ہے۔

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

实例

例子 1

设置从容器末端到对齐位置的行内方向滚动内边距为 20px：

div {
  scroll-padding-inline-end: 20px;
}

خود کا تجربہ کریئے

例子 2：图片库

scroll-padding-inline-end 属性可以在具有对齐行为的图片画廊中使用，以将图片从固定元素后面推出：

#container {
  scroll-padding-inline-end: 30px;
}

خود کا تجربہ کریئے

例子 3

当容器元素的 writing-mode 属性值设置为 'vertical-rl' 时，行内方向上容器和子元素的起始位置从左侧移动到顶部，而末端从右侧移动到底部。这会影响滚动对齐行为以及 scroll-padding-inline-end اپریشن کا کام کرنا:

#container {
  scroll-padding-inline-end: 20px;
  writing-mode: vertical-rl;
}

خود کا تجربہ کریئے

例子 4

当容器元素的 direction 属性值设置为 'rtl' 时，行内方向上容器和子元素的末端从右侧移动到左侧。这会影响滚动对齐行为以及 scroll-padding-inline-end اپریشن کا کام کرنا:

#container {
  scroll-padding-inline-end: 20px;
  مقصد: rtl;
}

خود کا تجربہ کریئے

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

scroll-padding-inline-end: آوتو|مقدار|مقصدی|نکلی جاتی ہے;

اپریشن کا مقدار

مقدار وصف
آوتو مقصدی
طول

px، pt، cm وغیرہ جیسے پیمانوں کا استعمال سے scroll-padding-inline-end کا پیمانہ دینا ہوتا ہے。

ناقابل استعمال منفی کا پیمانہ نہیں ہوتا ہے۔ ملاحظہ کریں:سی ای اس اکائی。
% اینکر عناصر کی چوڑائی کا فیصد کا پیمانہ دینا ہوتا ہے。
مقصدی اس اپریشن کو اس کی مقصدی کا مقصد رکھیجئے۔ ملاحظہ کریں: مقصدی。
نکلی جاتی ہے اس اپریشن کو اس کا والد عنصر سے نکلی جاتی ہے۔ ملاحظہ کریں: نکلی جاتی ہے。

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

مقصد: آوتو
نکلی جاتی ہے: نہیں
آنیماشن کا تعمیر: ناممکن ہے۔ ملاحظہ کریں:آنیماشن سے متعلق اپریشن。
ورژن: سی ایس ایس 3
جاوا اسکریپت گرامر: object.style.scrollPaddingInlineEnd="20px"

براوزر سپورٹ

جداول میں دکھائی دیئے والی شماریات، پہلی بار اس خاص خاصیت کو پورا طور پر سپورٹ کرنے والے براوزر کی نسلی کا نمائش دیتے ہیں。

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

متعلقہ صفحات

مطالب:CSS دیرکشن اپریشن

مطالب:CSS scroll-snap-align کی خاصیت

مطالب:CSS scroll-snap-type کی خاصیت

مطالب:CSS writing-mode کی خاصیت