ویژگی scroll-padding-inline CSS
- صفحه قبل scroll-padding-bottom
- صفحه بعدی scroll-padding-inline-end
word-spacing
scroll-padding-inline word-wrap
zoom
دروس انتخابی: direction و writing-mode پیشنهاد دوره:
تعریف و استفاده.
موقعیت جاذبه‌ای به موقعیتی اشاره دارد که وقتی شما رول را متوقف می‌کنید، عنصر فرزند به موقعیت جذب شده درون محفظه می‌رسد.توجه داشته باشید:scroll-snap-align این ویژگی فقط در جهت خطی معتبر است.
ویژگی scroll-padding-inline به عنوان کوتاه‌نویسی از موارد زیر تنظیم می‌شود:
scroll-padding-inline ویژگی scroll-padding-inline یک کوتاه‌نویسی از موارد زیر است:
مقدار ویژگی می‌تواند به روش‌های مختلف تنظیم شود:
اگر ویژگی scroll-padding-inline دو مقدار داشته باشد:
- scroll-padding-inline: 10px 50px;
- فاصله شروع 10px می‌باشد
فاصله پایان 50px می‌باشد
اگر ویژگی scroll-padding-inline یک مقدار داشته باشد:
- scroll-padding-inline: 10px;
فاصله شروع و پایان 10px می‌باشد scroll-padding-inline ویژگی‌های اثر آن، باید روی عنصر فرزند تنظیم شود تا بتوان دید scroll-snap-align ویژگی، و باید روی عنصر والد تنظیم شود scroll-padding-inline و scroll-snap-type ویژگی.
ویژگی‌های CSS scroll-padding-block و scroll-padding-inline ویژگی‌ها با ویژگی‌های CSS ویژگی scroll-padding-top CSSوscroll-padding-bottomوscroll-padding-left و scroll-padding-right بسیار مشابه هستند، اما scroll-padding-block و scroll-padding-inline این ویژگی به بُعد مستطیل و بُعد خطی وابسته است.
مثال
مثال 1
تنظیم پادروسی‌های داخلی در جهت خطی، از جعبه به موقعیت چسبندگی 20px:
div {
scroll-padding-inline: 20px;
}
مثال 2: کتابخانه تصاویر
در گالری تصاویر با رفتار چسبندگی اسکرول می‌توان از scroll-padding-inline این ویژگی تصویر را از عناصر ثابت بیرون می‌کشد:
#container {
scroll-padding-inline: 30px 0;
}
مثال 3
وقتی عنصر جعبه‌ای writing-mode وقتی مقدار ویژگی به 'vertical-rl' تنظیم شود، موقعیت شروع در جهت خطی درون عنصر و فرزندان آن از سمت چپ به بالا و موقعیت پایان از سمت راست به پایین حرکت می‌کند. این بر رفتار چسبندگی اسکرول تأثیر می‌گذارد و scroll-padding-inline روش کارکردن ویژگی:
#container {
scroll-padding-inline: 20px 0;
writing-mode: vertical-rl;
}
مثال 4
وقتی عنصر جعبه‌ای direction وقتی مقدار ویژگی به 'rtl' تنظیم شود، موقعیت شروع در جهت خطی درون عنصر و فرزندان آن از سمت راست به سمت چپ حرکت می‌کند. این بر رفتار چسبندگی اسکرول تأثیر می‌گذارد و scroll-padding-inline روش کارکردن ویژگی:
#container {
scroll-padding-inline: 20px 0;
direction: rtl;
}
قوانین CSS
scroll-padding-inline: auto|value|initial|inherit;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| auto | مقدار پیش‌فرض. مرورگر پادروسی‌های داخلی را محاسبه می‌کند. |
| length |
با استفاده از واحد‌های px، pt، cm و غیره scroll-padding-inline را مشخص کنید. مقدار منفی مجاز نیست. لطفاً به: مراجعه کنیدواحدهای CSS. |
| % | با استفاده از درصد از عرض عنصر در نظر گرفته شده برای پادروسی‌های داخلی. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به: مراجعه کنید initial. |
| inherit | این ویژگی را از عنصر پدر خود ارث می‌برد. لطفاً به: مراجعه کنید inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | auto |
|---|---|
| وراثت: | خیر |
| انیمیشن‌سازی: | پشتیبانی نمی‌شود. لطفاً به: مراجعه کنیدویژگی‌های مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| قوانین جاوااسکریپت: | object.style.scrollPaddingInline="20px" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه مرورگر اولین نسخه‌ای است که این ویژگی را کامل پشتیبانی می‌کند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 15.0 | 56.0 |
صفحات مرتبط
منبع:ویژگی direction CSS
منبع:ویژگی scroll-snap-align CSS
- صفحه قبل scroll-padding-bottom
- صفحه بعدی scroll-padding-inline-end
