ویژگی overscroll-behavior CSS

تعریف و استفاده

overscroll-behavior ویژگی‌ها برای غیرفعال کردن زنجیره‌ی حرکت (scroll chaining) یا پشتیبانی از حرکت بیش از حد (overscroll affordance) در هنگام تلاش برای حرکت فراتر از مرزهای حرکت.

زنجیره‌ی حرکت: هنگام حرکت بیش از حد در یک عنصر، باعث ایجاد رفتار حرکت در عنصر والد می‌شود. این رفتار پیش‌فرض است.

پشتیبانی از حرکت بیش از حد: هنگام تلاش برای حرکت فراتر از مرزهای حرکت، پشتیبانی ارائه شده به کاربر. به عنوان مثال، هنگام تلاش برای حرکت فراتر از بالای صفحه در دستگاه‌های موبایل، معمولاً پشتیبانی بصری نمایش داده می‌شود و صفحه به‌روزرسانی می‌شود.

overscroll-behavior این ویژگی فرم کوتاه‌تری از ویژگی‌های زیر است:

overscroll-behavior مقدار ویژگی می‌تواند به روش‌های مختلف تنظیم شود:

اگر ویژگی overscroll-behavior دو مقدار داشته باشد:

overscroll-behavior: none contain;
  • جهت x: بدون رفتار روان‌سازی بیش از حد
  • جهت y: بدون زنجیره اسکرول، اما اجازه می‌دهد به بازخورد روان‌سازی بیش از حد داده شود

اگر ویژگی overscroll-behavior یک مقدار داشته باشد:

overscroll-behavior: contain;
  • جهت x و y: بدون زنجیره اسکرول، اما اجازه می‌دهد به بازخورد روان‌سازی بیش از حد داده شود

مثال

مثال 1

بستن زنجیره اسکرول برای عناصر <div> قابل اسکرول:

#yellowDiv {
  overscroll-behavior: contain;
}

به طور شخصی امتحان کنید

مثال 2: گونه دوگانه:

این را تنظیم کنید overscroll-behavior مقدار ویژگی به auto none، اجازه می‌دهد به روان‌سازی بیش از حد اسکرول در جهت x داده شود، اما در جهت y اجازه نمی‌دهد:

#pinkDiv {
  overscroll-behavior: auto none;
}

به طور شخصی امتحان کنید

جمله‌بندی CSS

overscroll-behavior: auto|contain|none|initial|inherit;

مقدار ویژگی

مقدار توضیح
auto اجازه می‌دهد به رفتار زنجیره‌ای اسکرول و بازخورد روان‌سازی بیش از حد داده شود. مقدار پیش‌فرض.
contain اجازه می‌دهد به بازخورد روان‌سازی بیش از حد داده شود، اما اجازه نمی‌دهد به رفتار زنجیره‌ای اسکرول داده شود.
none اجازه نمی‌دهد به بازخورد روان‌سازی بیش از حد یا رفتار زنجیره‌ای اسکرول داده شود.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. لطفاً به: مراجعه کنید initial.
inherit این ویژگی را از عنصر والد خود ارث می‌برد. لطفاً به: مراجعه کنید inherit.

جزئیات فنی

مقدار پیش‌فرض: auto
وراثت: خیر
انیمیشن: پشتیبانی نمی‌شود. لطفاً به: مراجعه کنیدویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
جمله‌بندی JavaScript: object.style.overscrollBehavior="none"

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

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

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* در Microsoft Edge، مقدار ویژگی 'none' به عنوان 'contain' در نظر گرفته می‌شود، که این نادرست است.

صفحات مرتبط

منبع:ویژگی overscroll-behavior-x CSS

منبع:ویژگی overscroll-behavior-y CSS

منبع:ویژگی scroll-behavior CSS

منبع:ویژگی scroll-margin CSS

منبع:ویژگی scroll-padding CSS

منبع:ویژگی scroll-snap-align CSS