خاصية CSS Overscroll-Behavior: إتقان التحكم في حدود التمرير لتحسين تجربة المستخدم

في عالم تطوير الويب الديناميكي، يعد إنشاء تجربة مستخدم سلسة وبديهية أمرًا بالغ الأهمية. أحد الجوانب التي غالبًا ما يتم التغاضي عنها، ولكنه حاسم في هذه التجربة، هو سلوك التمرير، خاصةً عندما يصل المستخدمون إلى حدود منطقة قابلة للتمرير. هذا هو المكان الذي تبرز فيه خاصية CSS overscroll-behavior. تتيح هذه الخاصية للمطورين التحكم فيما يحدث عندما يصل تمرير المستخدم إلى أعلى أو أسفل عنصر ما. تتعمق هذه المقالة في خاصية overscroll-behavior، مستكشفةً خصائصها وحالات استخدامها وأمثلتها العملية لمساعدتك على إتقان التحكم في حدود التمرير.

فهم سلوك التمرير الزائد (Overscroll Behavior)

تحدد خاصية CSS overscroll-behavior ما يجب أن يفعله المتصفح عند الوصول إلى حدود التمرير. افتراضيًا، تقوم العديد من المتصفحات بتشغيل سلوكيات مثل تحديث الصفحة على نظام iOS أو تسلسل التمرير (scroll chaining) في المناطق القابلة للتمرير المتداخلة. توفر خاصية overscroll-behavior تحكمًا دقيقًا في هذه السلوكيات، مما يتيح لك إنشاء تجربة تمرير أكثر اتساقًا وقابلية للتنبؤ للمستخدمين عبر مختلف الأجهزة وأنظمة التشغيل. يحدث تسلسل التمرير عندما ينتقل زخم التمرير من عنصر واحد إلى العنصر الأصل بمجرد الوصول إلى حد التمرير للعنصر الداخلي.

لماذا يعتبر سلوك التمرير الزائد مهمًا؟

يعد التحكم في سلوك التمرير الزائد أمرًا حاسمًا لعدة أسباب:

• تجربة مستخدم محسّنة: يمنع تحديثات الصفحة غير المتوقعة أو تسلسل التمرير، مما يؤدي إلى رحلة مستخدم أكثر سلاسة وقابلية للتنبؤ.
• أداء محسن: يحسن أداء التمرير، خاصة على الأجهزة المحمولة، عن طريق منع معالجات DOM غير الضرورية.
• اتساق عبر المنصات: يضمن تجربة تمرير متسقة عبر مختلف المتصفحات وأنظمة التشغيل، مما يقلل من الخصائص الغريبة الخاصة بكل منصة.
• تجربة شبيهة بتطبيقات الهاتف المحمول: بالنسبة لتطبيقات الويب، وخاصة تطبيقات الويب التقدمية (PWAs)، يمكن أن يساهم التحكم في التمرير الزائد في شعور أقرب إلى تطبيقات الهاتف المحمول الأصلية.

خصائص overscroll-behavior

تقبل خاصية overscroll-behavior قيمة واحدة أو اثنتين أو ثلاث قيم من الكلمات المفتاحية. عند تحديد قيمة واحدة، فإنها تنطبق على كل من المحورين x و y. عند تحديد قيمتين، تنطبق الأولى على المحور x، والثانية على المحور y. القيمة الثالثة، عند وجودها، تنطبق على المناطق القابلة للتمرير على الأجهزة التي تعمل باللمس.

overscroll-behavior: auto

هذه هي القيمة الافتراضية. تسمح للمتصفح بالتعامل مع سلوك التمرير الزائد بطريقته الافتراضية. عادةً، ينتج عن هذا تسلسل التمرير، حيث يستمر التمرير إلى العنصر الأب التالي القابل للتمرير. على الأجهزة المحمولة، قد يؤدي هذا إلى تشغيل إجراء التحديث.

            .scrollable-element {
  overscroll-behavior: auto;
}
            

              
                Copy
              
            
          

مثال: تخيل موقع ويب به منطقة محتوى رئيسية وشريط جانبي. إذا قام المستخدم بالتمرير إلى أسفل الشريط الجانبي وواصل التمرير، فستسمح القيمة auto لمنطقة المحتوى الرئيسية بالبدء في التمرير.

overscroll-behavior: contain

تمنع القيمة contain حدوث تسلسل التمرير على ذلك المحور المحدد. هذا يعني أنه عندما يصل المستخدم إلى حد التمرير لعنصر لديه overscroll-behavior: contain، فلن ينتشر التمرير إلى العناصر الأصل. ومع ذلك، سيظل يعرض تأثيرات التجاوز المرئية (مثل "rubber banding" على نظام iOS).

            .scrollable-element {
  overscroll-behavior: contain;
}
            

              
                Copy
              
            
          

مثال: فكر في نافذة منبثقة (modal) بها محتوى قابل للتمرير. من خلال تعيين overscroll-behavior: contain على منطقة محتوى النافذة المنبثقة، فإنك تمنع الصفحة الرئيسية من التمرير عندما يصل المستخدم إلى أعلى أو أسفل المحتوى القابل للتمرير في النافذة المنبثقة.

overscroll-behavior: none

القيمة none هي الأكثر تقييدًا. تمنع تسلسل التمرير وتمنع أيضًا تأثيرات التجاوز المرئية. هذه القيمة مفيدة عندما تريد عزل سلوك التمرير لعنصر ما تمامًا.

            .scrollable-element {
  overscroll-behavior: none;
}
            

              
                Copy
              
            
          

مثال: فكر في خريطة مضمنة في صفحة ويب. إذا كنت لا تريد أن يقوم المستخدمون بتمرير الصفحة بأكملها عن طريق الخطأ عند التفاعل مع الخريطة، فيمكنك تعيين overscroll-behavior: none على حاوية الخريطة.

استخدام قيم متعددة للمحورين X و Y

يمكنك تحديد سلوكيات تمرير زائد مختلفة للمحورين x و y:

            .scrollable-element {
  overscroll-behavior: auto contain; /* x-axis: auto, y-axis: contain */
}
            

              
                Copy
              
            
          

في هذا المثال، سيظهر المحور x (التمرير الأفقي) سلوك التمرير الزائد الافتراضي، بينما سيمنع المحور y (التمرير الرأسي) تسلسل التمرير.

إضافة قيمة ثالثة للأجهزة التي تعمل باللمس

يمكنك إضافة قيمة ثالثة للتحكم في سلوك التمرير الزائد خصيصًا على الأجهزة التي تعمل باللمس، مثل الهواتف الذكية والأجهزة اللوحية. هذا مفيد بشكل خاص لمنع إجراء 'السحب للتحديث' (pull to refresh)، وهو ميزة شائعة في متصفحات الجوال. هذه القيمة الثالثة تنطبق فقط على الإدخال باللمس.

            .scrollable-element {
  overscroll-behavior: auto contain none; /* x-axis: auto, y-axis: contain, touch: none */
}
            

              
                Copy
              
            
          

في المثال أعلاه، تم تعيين سلوك اللمس إلى `none` مما يمنع إجراء 'السحب للتحديث'. إذا كانت القيمتان الأوليان متطابقتين، فإن قيمة اللمس ستتجاوزهما، ولكن فقط على الأجهزة التي تعمل باللمس. إذا كانت مختلفة، فإن القيمة الثالثة ستؤثر فقط على أجهزة اللمس، تاركة القيمتين الأوليين كما هما على الأجهزة غير التي تعمل باللمس.

حالات الاستخدام العملية والأمثلة

1. منع تحديث الصفحة على الأجهزة المحمولة

على الأجهزة المحمولة، وخاصة iOS، غالبًا ما يؤدي التمرير بعد الجزء العلوي من الصفحة إلى تحديث الصفحة. يمكن أن يكون هذا مزعجًا لتجربة المستخدم. لمنع ذلك، قم بتطبيق overscroll-behavior: contain أو overscroll-behavior: none على عنصر body:

            body {
  overscroll-behavior-y: contain;
}
            

              
                Copy
              
            
          

هذا يضمن أن التمرير خارج حدود الصفحة لا يؤدي إلى تحديث، مما يوفر تجربة أكثر سلاسة لمستخدمي الهواتف المحمولة.

2. التحكم في تسلسل التمرير في النوافذ المنبثقة (Modals)

غالبًا ما تحتوي النوافذ المنبثقة على محتوى قابل للتمرير. عندما يقوم المستخدم بالتمرير إلى أسفل النافذة المنبثقة، فأنت لا تريد أن تبدأ الصفحة الأساسية في التمرير. لمنع ذلك، قم بتطبيق overscroll-behavior: contain على منطقة محتوى النافذة المنبثقة:

            .modal-content {
  overscroll-behavior: contain;
}
            

              
                Copy
              
            
          

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

3. عزل التمرير في الخرائط المضمنة أو الإطارات (Iframes)

عند تضمين الخرائط أو الإطارات (iframes) داخل صفحة ويب، قد ترغب في عزل سلوك التمرير الخاص بها. يضمن تطبيق overscroll-behavior: none على حاوية الخريطة أو الإطار أن تفاعلات تمرير المستخدم تقتصر على المحتوى المضمن:

            .map-container {
  overscroll-behavior: none;
}
            

              
                Copy
              
            
          

هذا يمنع التمرير العرضي للصفحة عندما يتفاعل المستخدم مع الخريطة أو الإطار.

4. إنشاء مؤشرات تمرير مخصصة

بينما تزيل overscroll-behavior: none مؤشرات التمرير الافتراضية للمتصفح، فإنها تتيح لك إنشاء مؤشرات تمرير مخصصة لتقديم ملاحظات مرئية للمستخدم. يمكن أن يكون هذا مفيدًا بشكل خاص لتعزيز المظهر الجمالي لموقع الويب الخاص بك أو تطبيق الويب.

مثال: يمكنك استخدام JavaScript لاكتشاف حدود التمرير وعرض مؤشرات تمرير مخصصة:

            const scrollableElement = document.querySelector('.scrollable-element');
const scrollIndicatorTop = document.querySelector('.scroll-indicator-top');
const scrollIndicatorBottom = document.querySelector('.scroll-indicator-bottom');

scrollableElement.addEventListener('scroll', () => {
  if (scrollableElement.scrollTop === 0) {
    scrollIndicatorTop.style.display = 'none';
  } else {
    scrollIndicatorTop.style.display = 'block';
  }

  if (scrollableElement.scrollTop + scrollableElement.clientHeight === scrollableElement.scrollHeight) {
    scrollIndicatorBottom.style.display = 'none';
  } else {
    scrollIndicatorBottom.style.display = 'block';
  }
});
            

              
                Copy
              
            
          

5. بناء شريط عرض دوار (Carousel) بدون تسلسل تمرير

غالبًا ما تستفيد شرائط العرض الدوارة من سلوك التمرير المتحكم فيه. من خلال تعيين overscroll-behavior: contain على حاوية الشريط الدوار، فإنك تمنع تسلسل التمرير عندما يقوم المستخدم بالتمرير بعد العنصر الأول أو الأخير:

            .carousel-container {
  overscroll-behavior-x: contain;
  overflow-x: auto; /* Enable horizontal scrolling */
}
            

              
                Copy
              
            
          

توافق المتصفحات

تدعم خاصية overscroll-behavior جميع المتصفحات الحديثة الرئيسية، بما في ذلك:

• Chrome
• Firefox
• Safari
• Edge

يمكنك استخدام موقع مثل "Can I use..." للتحقق من دعم إصدارات محددة للمتصفحات المختلفة. بالنسبة للمتصفحات القديمة التي لا تدعم overscroll-behavior، سيتم تجاهل الخاصية، وسيتم تطبيق سلوك التمرير الزائد الافتراضي للمتصفح. لا حاجة إلى polyfills محددة لأن عدم وجود الخاصية لا يكسر الوظائف؛ بل يؤدي ببساطة إلى السلوك الافتراضي للمتصفح.

اعتبارات إمكانية الوصول

عند تنفيذ overscroll-behavior، من الضروري مراعاة إمكانية الوصول. في حين أن الخاصية نفسها لا تؤثر بشكل مباشر على إمكانية الوصول، فإن التحكم في سلوك التمرير يمكن أن يؤثر بشكل غير مباشر على المستخدمين ذوي الإعاقة.

• التنقل باستخدام لوحة المفاتيح: تأكد من أن التنقل باستخدام لوحة المفاتيح يظل فعالاً وبديهياً عند استخدام overscroll-behavior. يجب أن يكون المستخدمون قادرين على التنقل في المحتوى القابل للتمرير باستخدام لوحة المفاتيح دون سلوك غير متوقع.
• قارئات الشاشة: اختبر تطبيقك باستخدام قارئات الشاشة للتأكد من أن المحتوى القابل للتمرير يتم الإعلان عنه بشكل صحيح ويمكن الوصول إليه. تأكد من أن المستخدمين يمكنهم فهم حدود المناطق القابلة للتمرير بسهولة.
• إشارات مرئية: قدم إشارات مرئية واضحة للإشارة إلى المناطق القابلة للتمرير، خاصة عند استخدام overscroll-behavior: none. هذا يساعد المستخدمين على فهم أن هناك المزيد من المحتوى للعرض.

أفضل الممارسات لاستخدام overscroll-behavior

• استخدم لغرض معين: طبق overscroll-behavior فقط عند الضرورة للتحكم في سلوك حدود التمرير. تجنب استخدامه بشكل عشوائي، حيث يمكن أن يتعارض مع توقعات المستخدم.
• اختبر بدقة: اختبر تطبيقك عبر متصفحات وأجهزة مختلفة لضمان سلوك متسق. انتبه إلى الخصائص الغريبة الخاصة بالمنصة واضبط الكود الخاص بك وفقًا لذلك.
• ضع إمكانية الوصول في الاعتبار: ضع دائمًا إمكانية الوصول في الاعتبار عند استخدام overscroll-behavior. تأكد من أن تطبيقك لا يؤثر سلبًا على المستخدمين ذوي الإعاقة.
• أعط الأولوية لتجربة المستخدم: في النهاية، الهدف من استخدام overscroll-behavior هو تحسين تجربة المستخدم. اسعَ لإنشاء تجربة تمرير سلسة وقابلة للتنبؤ وبديهية لجميع المستخدمين.

تقنيات متقدمة

1. الدمج مع نقاط تثبيت التمرير (Scroll Snap Points)

يمكنك دمج overscroll-behavior مع نقاط تثبيت التمرير في CSS لإنشاء تجارب تمرير متحكم فيها. تسمح لك نقاط تثبيت التمرير بتحديد نقاط محددة يجب أن يتوقف عندها التمرير، مما يخلق سلوك تمرير أكثر تنظيمًا وقابلية للتنبؤ. على سبيل المثال، يمكنك إنشاء معرض تمرير أفقي حيث تستقر كل صورة في مكانها عندما يقوم المستخدم بالتمرير.

            .gallery-container {
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  display: flex;
  overflow-x: auto;
}

.gallery-item {
  scroll-snap-align: start;
  flex: 0 0 100%; /* Each item takes up 100% of the container width */
}
            

              
                Copy
              
            
          

في هذا المثال، تمنع overscroll-behavior: contain تسلسل التمرير، بينما تضمن scroll-snap-type: x mandatory أن التمرير يستقر عند بداية كل عنصر في المعرض.

2. سلوك التمرير الزائد الديناميكي باستخدام JavaScript

في بعض الحالات، قد تحتاج إلى ضبط overscroll-behavior ديناميكيًا بناءً على تفاعلات المستخدم أو حالة التطبيق. يمكنك استخدام JavaScript لتعديل خاصية overscroll-behavior:

            const scrollableElement = document.querySelector('.scrollable-element');

function setOverscrollBehavior(value) {
  scrollableElement.style.overscrollBehavior = value;
}

// Example: Disable overscroll behavior when a specific condition is met
if (someCondition) {
  setOverscrollBehavior('none');
} else {
  setOverscrollBehavior('auto');
}
            

              
                Copy
              
            
          

3. تنفيذ السحب للتحديث المخصص (Custom Pull-to-Refresh)

إذا كنت ترغب في استبدال سلوك السحب للتحديث الافتراضي للمتصفح بتنفيذ مخصص، يمكنك استخدام overscroll-behavior: none لتعطيل السلوك الافتراضي ثم استخدام JavaScript لاكتشاف إيماءة السحب للتحديث وتشغيل إجراء تحديث مخصص.

استكشاف الأخطاء الشائعة وإصلاحها

على الرغم من أن استخدام overscroll-behavior بسيط بشكل عام، فقد تواجه بعض المشكلات الشائعة:

• تسلسل التمرير غير المتوقع: إذا كنت لا تزال تواجه تسلسل التمرير على الرغم من استخدام overscroll-behavior: contain أو overscroll-behavior: none، فتحقق جيدًا من أنك طبقت الخاصية على العنصر الصحيح وأنه لا توجد قواعد CSS متعارضة.
• سلوك غير متسق عبر المتصفحات: على الرغم من أن overscroll-behavior مدعومة على نطاق واسع، فقد تكون هناك اختلافات طفيفة في السلوك عبر المتصفحات المختلفة. اختبر تطبيقك بدقة في عدة متصفحات لتحديد ومعالجة أي تناقضات.
• مشكلات إمكانية الوصول: إذا كنت تواجه مشكلات في إمكانية الوصول، مثل عدم إعلان قارئات الشاشة عن المحتوى القابل للتمرير بشكل صحيح، فراجع سمات ARIA الخاصة بك وتأكد من أنك توفر سياقًا كافيًا للمستخدمين ذوي الإعاقة.

الخاتمة

تعد خاصية CSS overscroll-behavior أداة قوية للتحكم في سلوك حدود التمرير وتعزيز تجربة المستخدم على مواقع الويب وتطبيقات الويب الخاصة بك. من خلال فهم خصائصها وحالات استخدامها وأفضل الممارسات، يمكنك إنشاء تجربة تمرير أكثر سلاسة وقابلية للتنبؤ وإمكانية وصول للمستخدمين عبر مختلف الأجهزة والمنصات. خذ الوقت الكافي لتجربة overscroll-behavior ودمجها في سير عمل التطوير الخاص بك لرفع جودة مشاريع الويب الخاصة بك. تذكر أن تختبر بدقة، وتضع إمكانية الوصول في الاعتبار، وتعطي الأولوية دائمًا لتجربة المستخدم.

من خلال إتقان overscroll-behavior، يمكنك التحكم في حدود التمرير وتوفير تجربة مصقولة وبديهية للمستخدمين. سواء كنت تبني موقعًا بسيطًا أو تطبيق ويب معقدًا، فإن فهم واستخدام overscroll-behavior هو مهارة قيمة لأي مطور ويب.