خصائص overscroll-behavior-inline CSS

الصفحة السابقة overscroll-behavior-block
الصفحة التالية overscroll-behavior-x

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

overscroll-behavior-inline يستخدم هذا الخصائص لتحديد إغلاق سلسلة التمرير للعنصر أو ردود الفعل على التمرير الزائد عند محاولة التمرير خارج حدود التمرير في الاتجاه الأفقي.

ملاحظة:لإطلاق overscroll-behavior في الاتجاه الأفقي، قد تحتاج إلى استخدام手势 التمرير على لوحة اللمس أو الشاشة اللمسية.

سلسلة التمرير هي سلوك التمرير في العنصر عندما يتم التمرير الزائد عن الحد في العنصر. هذا هو السلوك الافتراضي.

تباين التمرير هو التغذية الراجعة التي تقدم للمستخدم عند محاولة التمرير خارج حدود التمرير. على سبيل المثال، عند محاولة التمرير خارج أعلى الصفحة على جهاز محمول، عادةً ما يكون هناك تغذية راجعة بصرية لتحديث الصفحة.

CSS overscroll-behavior-inline و overscroll-behavior-block تعتمد على overscroll-behavior-x و خصائص overscroll-behavior-y الخصائص متشابهة جداً، لكن overscroll-behavior-inline و overscroll-behavior-block يعتمد الخاصية على الاتجاه العمودي والاتجاه الداخلي.

ملاحظة:خصائص CSS ذات الصلة writing-mode يحدد الاتجاه الداخلي. يؤثر ذلك على ما إذا كان الاتجاه الداخلي في الاتجاه الأفقي أو العمودي، وكذلك overscroll-behavior-inline نتيجة الخاصية. للصفحات باللغة الإنجليزية، الاتجاه الداخلي من اليسار إلى اليمين، والاتجاه العمودي إلى الأسفل.

مثال

مثال 1

إغلاق سلسلة التمرير في عناصر <div> القابلة للتمرير في الاتجاه الداخلي:

#yellowDiv {
  overscroll-behavior-inline: contain;
}

تجربة شخصية

مثال 2: دمج خاصية writing-mode

تغيير خاصية <div> الإنشائية writing-mode عندما يتم تعيين قيمة الخاصية 'vertical-rl'، يصبح الاتجاه الداخلي في الاتجاه العمودي، لذا overscroll-behavior-inline الآن يعمل في الاتجاه العمودي بدلاً من الاتجاه الأفقي:

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-inline: contain;
}

تجربة شخصية

جملة CSS

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

قيمة الخاصية

القيمة	الوصف
auto	يسمح بسلسلة التمرير والتباين في التمرير. القيمة الافتراضية.
تتضمن	يسمح بسلوك التباين في التمرير ولكن لا يسمح بسلسلة التمرير.
لا شيء	لا يسمح بالتباين في التمرير أو سلوك سلسلة التمرير.
initial	اجعل هذا الخصائص قيمة افتراضية. انظر إلى initial.
inherit	يرجى الرجوع إلى inherit.

تفاصيل التقنية

القيمة الافتراضية:	auto
التوريث:	لا
إنتاج الرسوم المتحركة:	غير مدعوم. انظر إلى:خصائص الرسوم المتحركة.
الإصدار:	CSS3
جافا سكريبت الجملة:	object.style.overscrollBehaviorInline="none"