تحكَّم في عملية التمرير - تخصيص تأثيرات السحب لإعادة التحميل والتجاوز

TL;DR

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

خلفية

حدود الانتقال للأعلى أو للأسفل وتسلسل الانتقال للأعلى أو للأسفل

يُعدّ التمرير أحد أهم الطرق الأساسية للتفاعل مع الصفحة، ولكن قد يكون من الصعب التعامل مع بعض أنماط تجربة المستخدم بسبب الإعدادات التلقائية الغريبة للمتصفّح. على سبيل المثال، لنأخذ درج تطبيقات يحتوي على عدد كبير من العناصر التي قد يضطر المستخدم إلى التمرير خلالها. عندما يصلون إلى الأسفل، تتوقف حاوية التجاوز عن التمرير لأنه لم يعد هناك محتوى يمكن استهلاكه. بعبارة أخرى، يصل المستخدم إلى "حدّ التمرير". ولكن لاحظ ما يحدث إذا استمر المستخدم في التمرير. يبدأ المحتوى خلف الدرج في الانتقال للأسفل. يتم تولي التمرير بواسطة الحاوية الأصلية؛ الصفحة الرئيسية نفسها في المثال.

يُطلق على هذا السلوك اسم تسلسل الانتقال، وهو السلوك التلقائي للمتصفّح عند الانتقال في المحتوى. غالبًا ما يكون الإعداد التلقائي جيدًا، ولكن في بعض الأحيان لا يكون مرغوبًا فيه أو حتى غير متوقع. قد ترغب بعض التطبيقات في تقديم تجربة مستخدم مختلفة عندما يصل المستخدم إلى حدود التمرير.

تأثير السحب للأسفل لإعادة التحميل

السحب للأسفل لإعادة التحميل هي إيماءة بديهية شاع استخدامها في تطبيقات الأجهزة الجوّالة مثل Facebook وTwitter. يؤدي السحب لأسفل في الخلاصة على وسائل التواصل الاجتماعي وتحريرها إلى إنشاء مساحة جديدة لتحميل المزيد من المنشورات الحديثة. في الواقع، أصبحت تجربة المستخدم هذه شائعة جدًا لدرجة أنّ متصفّحات الأجهزة الجوّالة، مثل Chrome على Android، اعتمدت التأثير نفسه. يؤدي التمرير سريعًا للأسفل في أعلى الصفحة إلى إعادة تحميل الصفحة بأكملها:

في حالات مثل PWA الخاص بمنصة Twitter، قد يكون من المنطقي إيقاف إجراء السحب للأسفل لإعادة التحميل الأصلي. لماذا؟ في هذا التطبيق، ربما لا تريد أن يقوم المستخدم بتحديث الصفحة عن طريق الخطأ. وقد تظهر أيضًا صورة متحركة مزدوجة لإعادة التحميل. بدلاً من ذلك، قد يكون من الأفضل تخصيص إجراء المتصفّح، ليتوافق بشكل أكبر مع العلامة التجارية للموقع الإلكتروني. المشكلة هي أنّ هذا النوع من التخصيص كان صعبًا، إذ يضطر المطوّرون إلى كتابة رمز JavaScript غير ضروري، أو إضافة مستمعين للمس غير سلبيين (ما يؤدي إلى حظر الانتقال إلى الأعلى أو الأسفل)، أو تثبيت الصفحة بأكملها في عنصر <div> بحجم 100vw/vh (لمنع تجاوز الصفحة). هذه الحلول البديلة لها تأثيرات سلبية موثّقة جيدًا على أداء الانتقال للأعلى أو للأسفل.

يمكننا تقديم أداء أفضل.

لنرحّب معًا بـ overscroll-behavior

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

تتضمّن السمة ثلاث قيم محتملة:

1. ‫auto: القيمة التلقائية قد تنتقل عمليات الانتقال التي تبدأ على العنصر إلى العناصر الأصلية.
2. contain: تمنع تسلسل الانتقال. لا يتم نشر عمليات الانتقال إلى العناصر الرئيسية، ولكن يتم عرض التأثيرات المحلية داخل العقدة. على سبيل المثال، تأثير توهج تجاوز حد التمرير على Android أو تأثير الشريط المطاطي على iOS الذي يُعلم المستخدم عندما يصل إلى حد التمرير. ملاحظة: يؤدي استخدام overscroll-behavior: contain في العنصر html إلى منع إجراءات التنقّل التي تتجاوز حد التمرير.
3. none: تشبه contain ولكنها تمنع أيضًا تأثيرات تجاوز حد التمرير داخل العقدة نفسها (مثل تأثير التوهج عند تجاوز حد التمرير في Android أو تأثير الارتداد في iOS).

لنلقِ نظرة على بعض الأمثلة لمعرفة كيفية استخدام overscroll-behavior.

منع عمليات الانتقال من تجاوز عنصر ثابت الموضع

سيناريو مربّع المحادثة

لنفترض أنّ هناك مربّع محادثة ثابتًا في أسفل الصفحة. الهدف هو أن يكون مربّع المحادثة مكوّنًا مستقلاً وأن يتم التنقّل فيه بشكل منفصل عن المحتوى الذي يظهر خلفه. ومع ذلك، بسبب تسلسل الانتقال، يبدأ المستند في الانتقال بمجرد وصول المستخدم إلى آخر رسالة في سجل المحادثات.

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

#chat .msgs {
  overflow: auto;
  overscroll-behavior: contain;
  height: 300px;
}

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

سيناريو تراكب الصفحة

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

مثال - نافذة مشروطة مع السمة overscroll-behavior: contain وبدونها:

إيقاف ميزة "السحب للأسفل لإعادة التحميل"

يمكن إيقاف إجراء السحب للأسفل لإعادة التحميل من خلال سطر واحد من CSS. ما عليك سوى منع تسلسل الانتقال على العنصر الذي يحدّد إطار العرض بالكامل. في معظم الحالات، يكون ذلك <html> أو <body>:

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

من خلال هذه الإضافة البسيطة، يمكننا إصلاح الرسوم المتحركة المزدوجة للسحب للأسفل لإعادة التحميل في النسخة التجريبية من مربّع الدردشة، ويمكننا بدلاً من ذلك تنفيذ تأثير مخصّص يستخدم رسومًا متحركة أكثر تنظيمًا للتحميل. يتم أيضًا تعتيم البريد الوارد بالكامل أثناء إعادة تحميله:

في ما يلي مقتطف من الرمز الكامل:

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%;
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refre>she<r"
  div class=&qu><ot;l>oad<ing-bar"/div
  div>< cla>ss=<"loading-bar"></div>
  <div class="loading><-bar>&<quot>;/<div
  div class=&q><uot;loading><-bar&quo>t;</div
/>div

section id="inbox"!-- msgs --/section

script
  let _startY;
  const inbox = document.querySel>ector('#inbox');

  inbox.addEventListener('touchstart', e = {
    _startY = e.touches>[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e = {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container&&
  >  // and &&user is scrolling up.
    if (document.scrollingElement.scrollTop === 0  y  _startY 
        !document.body.class<List.co>ntains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
/script

إيقاف تأثيرات التوهج والتمدد عند تجاوز حد التمرير

لإيقاف تأثير الارتداد عند الوصول إلى حدود الانتقال، استخدِم overscroll-behavior-y: none:

body {
  /* Disables pull-to-refresh and overscroll glow effect.
     Still keeps swipe navigations. */
  overscroll-behavior-y: none;
}

عرض توضيحي كامل

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