overscroll-behavior هو خاصية في CSS تتحكم في سلوك العنصر عند حدوث التمرير وتجاوز نطاق التمرير حدوده. تعتبر هذه الخاصية مفيدة بشكل خاص لتحسين تجربة المستخدم، خاصة على الأجهزة المحمولة. يمكن استخدام هذه الخاصية لتجنب تأثير "الارتداد" الافتراضي أو تخصيص هذا التأثير عندما يحاول المستخدم تمرير عنصر وصل إلى حد التمرير.
سلوك التمرير الزائد: تلقائي | لا يحتوي على |. /* أو قم بالتعيين بشكل منفصل للمحور X والمحور Y*/ overscroll-behavior-x: تلقائي | لا يحتوي على |. سلوك التمرير الزائد: تلقائي | لا يحتوي على |.
auto : القيمة الافتراضية. يستخدم العنصر سلوك التمرير الافتراضي الخاص به. في معظم المتصفحات، يعني هذا أن التمرير سيكون له تأثير "مرتد" (أي أن المحتوى سوف يرتد قليلاً بعد الوصول إلى الحد) عند تجاوز نطاق التمرير. contain : منع انتشار سلسلة التمرير. إذا حدث التمرير على عنصر محدد وتم تمرير محتوى العنصر خارج الحدود، فلن يتم نشر حدث التمرير إلى العنصر الأصلي للعنصر. يساعد هذا في إنشاء مناطق تمرير مستقلة وتجنب تعارضات التمرير غير الضرورية. none : يمنع أي سلوك افتراضي عند التمرير، بما في ذلك تأثير "الارتداد". وهذا يعني أنه عندما يحاول المستخدم تمرير عنصر وصل إلى حدوده، فلن يرى أي تأثيرات تمرير أو رسوم متحركة.لنفترض أن لديك صفحة تحتوي على منطقة داخلية قابلة للتمرير (مثل القائمة أو معرض الصور). إذا كنت تريد أن تتوقف هذه المنطقة الداخلية عند التمرير إلى الحافة دون إنتاج التأثير الافتراضي "الارتداد"، فيمكنك ضبطها على النحو التالي:
منطقة قابلة للتمرير {
سلوك التمرير الزائد: لا شيء؛
الارتفاع: 200 بكسل؛
تجاوز السعة: تلقائي /* السماح بالتمرير على المحور Y*/
} في هذا المثال، يتم تطبيق فئة .scrollable-area على العنصر الذي تريد التحكم في سلوك التمرير فيه. قم بتعيين overscroll-behavior: none; بحيث لن يكون هناك أي تأثيرات تمرير أو رسوم متحركة إضافية عند التمرير إلى أعلى العنصر أو أسفله.
أشياء يجب ملاحظتها
لا تدعم جميع المتصفحات سمةoverscroll-behavior . لذلك، يوصى بإجراء اختبار مناسب عند الاعتماد على وظيفة هذه الخاصية. قد تدعم بعض المتصفحات خصائص overscroll-behavior-x و overscroll-behavior-y ، مما يسمح لك بالتحكم في سلوك التمرير الأفقي والرأسي على التوالي. ومع ذلك، فإن هذا الدعم محدود أيضًا، لذا فإن الاختبار مطلوب أيضًا. استخدم هذه السمة بحذر عند تصميم واجهات المستخدم مع وضع إمكانية الوصول وتجربة المستخدم في الاعتبار. في بعض الحالات، قد يكون سلوك التمرير الافتراضي (مثل تأثير "الارتداد") أكثر سهولة وفهمًا للمستخدمين.وبهذا تنتهي هذه المقالة حول سمة سلوك التمرير الزائد في CSS. لمزيد من المعلومات حول سمة سلوك التمرير الزائد في CSS، يرجى البحث في المقالات السابقة على موقع downcodes.com أو متابعة تصفح المقالات ذات الصلة أدناه downcodes.com!