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

TL;DR

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

الخلفية

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

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

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

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

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

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

يمكننا أن نفعل ما هو أفضل!

سنعرّفك على 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="refresher">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

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

<script>
  let _startY;
  const inbox = document.querySelector('#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.classList.contains('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.