خاصية سلوك التمرير الزائد
آخر تحديث: 2026-09-13
overscroll-behavior خاصية سلوك التمرير الزائد
تتحكم خاصية overscroll-behavior فيما يحدث عندما يصل حاوية التمرير إلى حدودها — فمثلًا ما إذا كان حدث التمرير يمر إلى الحاوية الأصلية (scroll chaining) أو يُطلق سلوكًا افتراضيًا للمتصفح مثل تحديث الصفحة أو التنقل في السجل. وهي خاصية مفتاحية لحل مشكلة اختراق التمرير في الحاويات المتداخلة.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
overscroll-behavior: contain | none | auto;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
contain | none | auto | كلمة مفتاحية | السلوك عند حد التمرير |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| overscroll-behavior | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تحجب contain تمرير السلسلة، فلا يتحرك الحاوية الخارجية عند الوصول إلى الحد داخل الحاوية؛ أما none فتحجب أيضًا سلوكيات الحد الافتراضية للمتصفح مثل الارتداد في iOS.
تلميح： للنوافذ المنبثقة والشريطية الجانبية واللوحات العائمة ذات التمرير المتداخل، يُوصى بـ overscroll-behavior: contain لمنع المستخدمين من تمرير الصفحة خلفها عن طريق الخطأ.
❓ الأسئلة الشائعة
Qما الفرق بين overscroll-behavior و touch-action؟
Aتتحكم overscroll-behavior في كيفية انتشار سلسلة التمرير بعد الوصول إلى الحد — سواء تحرك الحاوية الخارجية أو تُطلق سلوكيات المتصفح مثل التحديث والارتداد. أما touch-action فتتحكم في كيفية تفسير المتصفح لإيماءات اللمس — ما إذا كان السحب أو التكبير أو التكبير بنقرة مزدوجة مسموحًا. تستهدف الأولى ما يحدث عند التمرير خلف الحافة؛ وتستهدف الثانية كيفية تفسير الإيماءات. كلتاهما تحل مشاكل مختلفة.
Qلماذا لا تزال الصفحة تتمرر رغم ضبط overscroll-behavior: contain؟
Aتعمل overscroll-behavior فقط على سلسلة التمرير: عندما يصل حاوية داخلية إلى حدها وتحاول تمرير التمرير إلى الطبقة الخارجية، تعترض contain هذا التمرير. فإذا لم يأتِ حدث التمرير من حاوية التمرير أصلًا، أو كانت الصفحة الخارجية تُتمرر بالإصبع على الهاتف، فلن تفعل contain شيئًا. وتأكد أيضًا من أن الخاصية مضبوطة على الحاوية التي تتمرر فعلًا.
Qما هي سلسلة التمرير، وكيف أمنع اختراق التمرير؟
Aسلسلة التمرير تعني أنه بعد أن يتمرر عنصر داخلي حتى حدوده، يستمر التمرير ويمر إلى الأصل أو الصفحة — وهو الاختراق الكلاسيكي حيث يؤدي التمرير داخل نافذة منبثقة إلى تمرير الصفحة أيضًا. اضبط overscroll-behavior: contain على حاوية المحتوى في النافذة المنبثقة أو الشريطية الجانبية أو الدرج لاعتراض التمرير؛ ويعطّل none أيضًا السلوكيات الافتراضية مثل السحب للتحديث والارتداد.
Qما هي العلاقة بين overscroll-behavior و overscroll-behavior-x/y؟
Aخاصية overscroll-behavior هي الاختصار الذي يضبط سلوك الحد لكلا المحورين دفعة واحدة؛ بينما overscroll-behavior-x و overscroll-behavior-y هما الخاصيتان المفصلتان للاتجاهين الأفقي والرأسي. فمثلًا، لحظر سلسلة التمرير في الاتجاه الرأسي فقط، اكتب overscroll-behavior-y: contain.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
