CSS سیکل-پیدینگ-رائٹ پرپرتی

定义和用法

scroll-padding-right 属性指定从容器右侧到子元素吸附位置的距离。

吸附位置، یعنی کہ اس کی رولنگ متوقف ہونے کے بعد، ذیلی عنصر کا کونارا، یعنی کونارا میں ساتھ میں پائیدار کا موقع

吸附位置 کا scroll-snap-align 属性 کا سیٹ اپ، لیکن وہ سی ایس ایس کی اپنے اپنی خصوصیات سے بھی متاثر ہو سکتا ہے طول مسیر و writing-mode اثراتی کا

توجیهًاً:این ویژگی تنها زمانی معتبر است که موقعیت جذب در سمت راست عنصر فرزند تنظیم شده باشد.}

برای مشاهده این ویژگی، scroll-padding-right ویژگی را برای مشاهده تأثیر آن در عنصر فرزند تنظیم کنید scroll-snap-align ویژگی، و این ویژگی‌ها را در عنصر والد تنظیم کنید scroll-padding-right و scroll-snap-type ویژگی.

مثال

مثال 1

پدینگ داخلی را به فاصله 20px از سمت راست کانتینر به موقعیت جذب تنظیم کنید:

div {
  scroll-padding-right: 20px;
}

آزمایش کنید

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

scroll-padding-right ویژگی می‌تواند برای گالری‌های تصویر با جذب استفاده شود تا تصاویر را از عناصر ثابت به سمت چپ هل دهد:

#container > img {
  scroll-padding-right: 30px;
}

آزمایش کنید

مثال 3: تنظیم پدینگ داخلی در سمت راست

هنگامی که جذب در دو جهت تنظیم شده است، می‌توانید در داخل کانتینر نیز جذب را تنظیم کنید: scroll-padding-right ویژگی. به سمت چپ رول کنید تا تأثیر را ببینید:

#container > div {
  scroll-padding-right: 30px;
}

آزمایش کنید

مثال 4: موقعیت جذب

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

#container {
  طول مسیر: rtl;
  scroll-padding-right: 30px;
}
#container > div {
  scroll-snap-align: none end;
}

آزمایش کنید

آموزش زبان CSS

scroll-padding-right: خودکار|مقدار|ابتدایی|ترتیب‌دهی;

مقدار ویژگی

جزئیات فنی

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

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

مربوط صفحات

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

مطالبه:CSS سیکل-نپ-الائن پرپرتی

مطالبه:CSS سیکل-نپ-تائپ پرپرتی

مطالبه:CSS writing-mode کا اپریشن