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

TL;DR

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

الخلفية

تمرير الحدود وتسلسل التمرير

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

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

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

السحب للتحديث هو إيماءة بديهية شائعة الاستخدام في تطبيقات الأجهزة المحمولة مثل 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;
}

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

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