ویژگی overscroll-behavior-x در CSS
- صفحه قبل overscroll-behavior-inline
- صفحه بعدی overscroll-behavior-y
تعریف و استفاده
overscroll-behavior-x این ویژگی برای بستن زنجیره‌ی اسکرول یا بازخورد حرکت بیش از حد هنگام تلاش برای اسکرول خارج از مرزهای اسکرول استفاده می‌شود.
توجه:برای فعال‌سازی overscroll-behavior در محور x، ممکن است نیاز باشد که از حرکت دستی در صفحه‌نمایش لمسی یا صفحه‌نمایش لمسی استفاده کنید.
زنجیره‌ی اسکرولبه معنای این است که حرکت بیش از حد در یک عنصر باعث رفتار اسکرول پدر می‌شود. این رفتار پیش‌فرض است.
حرکت بیش از حدبازخورد، بازخوردی است که هنگام تلاش کاربر برای اسکرول خارج از مرزهای اسکرول داده می‌شود. به عنوان مثال، در دستگاه‌های موبایل، هنگام تلاش برای اسکرول خارج از بالای صفحه، معمولاً با بازخورد بصری تازه‌سازی صفحه همراه است.
مثال
باز کردن زنجیره‌ی اسکرول در عنصر <div> قابل اسکرول در محور x:
#yellowDiv {
overscroll-behavior-x: contain;
}
جمله‌بندی CSS
overscroll-behavior-x: auto|contain|none|initial|inherit;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| auto | اجازه می‌دهد که رفتار زنجیره‌ای حرکت و بازخورد حرکت بیش از حد را فراهم کند. مقدار پیش‌فرض. |
| contain | اجازه می‌دهد که بازخورد حرکت بیش از حد را فراهم کند، اما اجازه نمی‌دهد که زنجیره‌ای حرکت داده شود. |
| none | اجازه نمی‌دهد که بازخورد حرکت بیش از حد یا رفتار زنجیره‌ای حرکت داده شود. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial. |
| inherit | این ویژگی را از عنصر پدر خود ارث می‌برد. به: inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | auto |
|---|---|
| وراثت: | خیر |
| انیمیشن‌سازی: | پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| جمله‌بندی JavaScript: | object.style.overscrollBehaviorX="none" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را کامل پشتیبانی می‌کنند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 63.0 | 18.0 * | 59.0 | 16.0 | 50.0 |
* در Microsoft Edge، مقدار ویژگی none به عنوان contain در نظر گرفته می‌شود، که این نادرست است.
صفحات مرتبط
ارجاع:ویژگی overscroll-behavior در CSS
ارجاع:ویژگی overscroll-behavior-block در CSS
ارجاع:ویژگی overscroll-behavior-inline در CSS
ارجاع:ویژگی overscroll-behavior-y در CSS
ارجاع:ویژگی scroll-behavior در CSS
ارجاع:ویژگی scroll-margin در CSS
ارجاع:ویژگی scroll-padding CSS
- صفحه قبل overscroll-behavior-inline
- صفحه بعدی overscroll-behavior-y
