خصائص overscroll-behavior CSS

التعريف والاستخدام

overscroll-behavior يستخدم الخاصية لإغلاق سلسلة التمرير (scroll chaining) أو ملاحظة التمرير الزائد (overscroll affordance) عند محاولة التمرير خارج حدود التمرير.

سلسلة التمرير: عند التمرير الزائد في عنصر، يؤدي إلى سلوك التمرير في العنصر الأم. هذا هو السلوك الافتراضي.

ملاحظة التمرير الزائد: ملاحظة تقدمها للعميل عند محاولة التمرير خارج حدود التمرير. على سبيل المثال، عند محاولة التمرير خارج أعلى الصفحة على جهاز المحمول، يتم عادة عرض ملاحظة مرئية وتجديد الصفحة.

overscroll-behavior الخصائص هي شكل مختصر للعديد من الخصائص التالية:

overscroll-behavior الخصائص هي شكل مختصر للعديد من الخصائص التالية:

يمكن تعيين قيمة الخاصية بطرق مختلفة:

إذا كان لدي خاصية overscroll-behavior قيمتين:
  • overscroll-behavior: none contain;
  • اتجاه x: لا يوجد سلوك التغذية الراجعة الزائدة.

اتجاه y: لا يوجد سلوك سلسلة التمرير، ولكن يسمح بالتعامل مع التغذية الراجعة الزائدة.

#yellowDiv {
  • إذا كان لدي خاصية overscroll-behavior قيمة واحدة:

اتجاه 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
جافا سكربت الجملة: 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