ویژگی overscroll-behavior-inline CSS
- صفحه قبلی overscroll-behavior-block
- صفحه بعدی overscroll-behavior-x
تعریف و استفاده
overscroll-behavior-inline این ویژگی برای قطع زنجیره‌ی اسکرول یا بازخورد اسکرول بیش از حد در جهت خط استفاده می‌شود.
توجه:برای فعال‌سازی overscroll-behavior در جهت خط، ممکن است نیاز باشد که از حرکت لمسی در صفحه‌نمایش لمسی یا صفحه‌نمایش لمسی استفاده کنید.
滚动链是指在一个元素上过度滚动会导致父元素的滚动行为。这是默认行为。
رولینگ زنجیره‌ای به معنای آن است که رولینگ زیاده‌روی در یک عنصر باعث رفتار رولینگ پدر آن می‌شود. این رفتار پیش‌فرض است.
بازخورد روان‌سنجی زیاده‌روی هنگامی است که کاربر سعی می‌کند به ورودی‌های رولینگ فراتر از مرزهای رولینگ دسترسی پیدا کند. به عنوان مثال، در دستگاه‌های موبایل، هنگامی که سعی می‌کنید از بالای صفحه به ورودی‌های رولینگ دسترسی پیدا کنید، معمولاً بازخورد تصویری بارگذاری صفحه همراه است. overscroll-behavior-inline و overscroll-behavior-block ویژگی با overscroll-behavior-x و ویژگی overscroll-behavior-y ویژگی‌ها بسیار مشابه هستند، اما overscroll-behavior-inline و overscroll-behavior-block ویژگی‌ها بستگی به جهت بلوک و درون‌راستا دارند.
توجه:ویژگی‌های CSS مرتبط writing-mode این ویژگی تعریف می‌کند که جهت درون‌راستا در جهت x یا y است و همچنین overscroll-behavior-inline نتیجه ویژگی. برای صفحات انگلیسی، جهت درون‌راستا از چپ به راست است و جهت بلوک به سمت پایین است.
مثال
مثال 1
رولینگ زنجیره‌ای را برای عنصر <div> قابل‌حل شدن در جهت درون‌راستا غیرفعال می‌کند:
#yellowDiv {
overscroll-behavior-inline: contain;
}
مثال 2: ترکیب ویژگی writing-mode
مقدار ویژگی writing-mode را برای عنصر <div> تنظیم می‌کنید writing-mode وقتی که مقادیر 'vertical-rl' را برای ویژگی writing-mode تنظیم می‌کنید، جهت درون‌راستا به جهت y تبدیل می‌شود، بنابراین overscroll-behavior-inline حالا در جهت y عمل می‌کند، نه در جهت x:
#yellowDiv {
writing-mode: vertical-rl;
overscroll-behavior-inline: contain;
}
جملات نویسی CSS
overscroll-behavior-inline: auto|contain|none|initial|inherit;
مقادیر ویژگی
| مقادیر | توضیح |
|---|---|
| auto | رفتار رولینگ زنجیره‌ای و بازخورد روان‌سنجی را مجاز می‌کند. مقدار پیش‌فرض. |
| contain | رفتار بازخورد روان‌سنجی را مجاز می‌کند، اما رولینگ زنجیره‌ای را نمی‌پذیرد. |
| none | پشتیبانی از بازخورد روان‌سنجی و رفتار رولینگ زنجیره‌ای را مجاز نمی‌کند. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. مراجعه کنید initial. |
| inherit | این ویژگی را از عنصر پدر خود ارث می‌برد. مراجعه کنید inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | auto |
|---|---|
| ارث‌برداری: | خیر |
| انیمیشن: | پشتیبانی نمی‌شود. لطفاً به: مراجعه کنیدویژگی‌های مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| جملات نویسی JavaScript: | object.style.overscrollBehaviorInline="none" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه مرورگر اولیه‌ای است که این ویژگی را کاملاً پشتیبانی می‌کند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 63.0 | 18.0 | 59.0 | 16.0 | 50.0 |
صفحات مرتبط
ارجاع:ویژگی overscroll-behavior CSS
ارجاع:ویژگی overscroll-behavior-block CSS
ارجاع:ویژگی overscroll-behavior-x CSS
ارجاع:ویژگی overscroll-behavior-y CSS
ارجاع:ویژگی scroll-behavior CSS
ارجاع:ویژگی scroll-margin CSS
ارجاع:ویژگی scroll-padding CSS
ارجاع:ویژگی scroll-snap-align CSS
ارجاع:ویژگی writing-mode CSS
- صفحه قبلی overscroll-behavior-block
- صفحه بعدی overscroll-behavior-x
