CSS scroll-padding-inline-start کا پراپرٹی

定义和用法

scroll-padding-inline-start 属性指定了在行内方向上从容器起始位置到子元素吸附位置的距离。

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

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

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

توجہ دہانی کریں:یہ속پتی صرف لائن وار سمت پر سیٹ کی گئی ہے scroll-snap-align 속성 'start' کی وجہ سے کاام اور عمل کرتا ہے۔

دیدار کرنا چاہئیے scroll-padding-inline-start 속성 کا اثر دیکھنا چاہئیے، اور ان کی سترائی پر سیٹ کرنا چاہئیے scroll-snap-align 속성، اور پدر عنصر پر سیٹ کرنا چاہئیے scroll-padding-inline-start اور scroll-snap-type ویژگی.

مثال

مثال 1

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

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

آزمایش کنید

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

scroll-padding-inline-start این ویژگی می‌تواند در عکس‌الگوهای دارای چسبندگی اسکرول استفاده شود تا عکس‌ها را از عناصر ثابت به بیرون بیرون کند:

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

آزمایش کنید

مثال 3

وقتی عنصر محیط writing-mode وقتی مقدار ویژگی به 'vertical-rl' تنظیم شود، موقعیت شروع محیط و فرزندان آن در جهت خطی به سمت راست تغییر می‌کند، که این اثر بر رفتار چسبندگی اسکرول دارد و scroll-padding-inline-start روش کارکردن ویژگی:

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

آزمایش کنید

مثال 4

وقتی عنصر محیط direction وقتی مقدار ویژگی به 'rtl' تنظیم شود، موقعیت شروع محیط و فرزندان آن در جهت خطی به سمت چپ تغییر می‌کند و موقعیت پایان آن‌ها به پایین تغییر می‌کند، که این اثر بر رفتار چسبندگی اسکرول دارد و scroll-padding-inline روش کارکردن ویژگی:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

آزمایش کنید

آموزش زبان CSS

scroll-padding-inline-start: auto|value|initial|inherit;

مقدار ویژگی

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

با استفاده از واحد‌های px، pt، cm و غیره scroll-padding-inline-start مشخص کنید.

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

جزئیات فنی

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

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 15.0 56.0

مربوط صفحات

مطالعه:CSS سمت کی اپریٹیو

مطالعه:CSS scroll-snap-align کا پراپرٹی

مطالعه:CSS scroll-snap-type کا پراپرٹی

مطالعه:CSS writing-mode کا اپریٹر