تريد أنت والمستخدمون تطبيقات ويب أجهزة محمولة تتفاعل وتمرر بسلاسة إلى لمسها. يجب أن يكون تطويرها سهلاً، ولكن للأسف كيف يتم تصميم الويب على الأجهزة الجوّالة تفاعل المتصفّحات مع أحداث اللمس أثناء التمرير، يتم تركها كتنفيذ التفاصيل في مواصفات TouchEvent. بالنسبة ونتيجة لذلك، يمكن تقسيم الأساليب إلى 4 فئات تقريبًا. هذا النمط وضعًا يكشف عن وجود توتر جوهري بين تقديم سلاسة التمرير الحفاظ على تحكم المطورين.
هل هناك أربعة نماذج مختلفة لمعالجة حدث اللمس؟
تنقسم الاختلافات في السلوك بين المتصفحات إلى أربعة نماذج.
معالجة الأحداث المتزامنة العادية
ويتم إرسال أحداث Touchmove أثناء التمرير، ويتم إرسال كل مجموعات تحديث التمرير إلى أن تكتمل معالجة عملية الانتقال باللمس. هذا جيد مثل أبسط الفهم والأقوى ولكنه سيئ لأداء التمرير لأنه يعني أن كل إطار أثناء التمرير يجب أن يحظر في سلسلة التعليمات الرئيسية.
المتصفحات: متصفح Android (Android 4.0.4 و4.3) وMobile Safari (عند التمرير div)
المعالجة غير المتزامنة للحركة باللمس
يتم إرسال أحداث التحريك باللمس أثناء التمرير، ولكن يمكن متابعة التمرير بشكلٍ غير متزامن (يتم تجاهل حدث نقل اللمس بعد بدء التمرير). قد يؤدي ذلك إلى "معالجة مزدوجة" من الأحداث، مثل الاستمرار في الانتقال بعد أن يتّخذ الموقع الإلكتروني إجراءً أثناء الحركة باللمس، يستدعي preventDefault في الحدث ليطلب من المتصفّح عدم التعامل مع هذه العملية.
المتصفحات: Mobile Safari (عند تمرير المستند)، Firefox
تم إيقاف ميزة Touchmove أثناء التمرير
لا يتم إرسال أحداث الانتقال باللمس بعد بدء التمرير ولا يتم استئنافها إلا بعد حدث نقطة اللمس. في هذا النموذج، يصعُب التمييز بين اللمسة الثابتة والتمرير.
المتصفّحات: Samsung Browser (تم إرسال أحداث Mousemove)
إلغاء اللمس عند بدء الانتقال للأسفل أو للأعلى
لا يمكن تحقيق ذلك في الحالتَين التاليتَين: سلاسة التنقّل والتحكّم في إعدادات المطوّرين، ويوضّح هذا النموذج الموازنة بين التمرير السلس والتعامل مع الأحداث، كما هو الحال في دلالات مواصفات أحداث المؤشر. لا يمكن تنفيذ بعض التجارب التي قد تحتاج إلى تتبُّع الإصبع، مثل السحب لإعادة التحميل.
المتصفّحات: Chrome Desktop M32 أو الإصدارات الأحدث وChrome Android
ما أهمية التغيير؟
يستخدم Chrome لأجهزة Android حاليًا الطراز القديم من Chrome: touchcancel عند التمرير البدء، مما يحسن أداء التمرير، ولكنه يؤدي إلى إرباك مطوري البرامج. وعلى وجه الخصوص، لا يعرف بعض المطوّرين حدث touchcancel أو كيفية للتعامل معها، مما تسبّب في تعطُّل بعض المواقع الإلكترونية. والأهم من ذلك، فئة كاملة من تأثيرات وسلوكيات التمرير في واجهة المستخدم، مثل السحب لإعادة التحميل، الأشرطة المخفية، ونقاط الالتقاط صعبة أو مستحيلة التنفيذ أيضًا.
وبدلاً من إضافة ميزات ذات ترميز ثابت خصيصًا لدعم هذه التأثيرات، يهدف Chrome إلى التركيز على إضافة أساسيات النظام الأساسي التي تسمح للمطوّرين لتطبيق هذه التأثيرات بشكل مباشر. الاطّلاع على نظام ويب أساسي لعرض عام عن هذه الفلسفة.
نموذج Chrome الجديد: نموذج Touchmove غير المتزامن المقيّد
يقدّم متصفِّح Chrome سلوكًا جديدًا.
لتحسين التوافق مع التعليمات البرمجية المكتوبة للمتصفحات الأخرى عند
التمرير، بالإضافة إلى تفعيل سيناريوهات أخرى تعتمد على الحركة باللمس
الأحداث أثناء التمرير. هذه الميزة مفعَّلة تلقائيًا ويمكنك تفعيلها
باستخدام العلامة التالية، chrome://flags\#touch-scrolling-mode.
السلوك الجديد هو:
- يتم إرسال حركة اللمس الأولى بشكل متزامن للسماح بالانتقال إلى التمرير. تم الإلغاء
- أثناء التمرير النشط
- يتم إرسال أحداث Touchmove بشكل غير متزامن
- throttled إلى حدث واحد لكل 200 ملّي ثانية، أو إذا كانت منطقة انزلاق CSS 15 بكسل تم تجاوزه
- قيمة Event.cancelable هي false
- وبخلاف ذلك، يتم تنشيط أحداث تحريك اللمس بشكل متزامن كالمعتاد عند التمرير النشط. ينتهي أو لا يمكن نظرًا للوصول إلى الحد الأقصى المسموح به للتمرير
- يقع حدث نقطة اللمس دائمًا عندما يرفع المستخدم إصبعه.
يمكنك تجربة هذا العرض التوضيحي في Chrome لنظام Android وتبديل
يُرجى النقر على chrome://flags\#touch-scrolling-mode لمعرفة الفرق.
يسرنا أن نعرف رأيك
يمكن أن يحسّن نموذج Touchmove غير المتزامن من المتصفحات التوافق وتفعيل فئة جديدة من تأثيرات إيماءات اللمس. نحن مهتمون وعلى معرفة آراء المطوّرين ورؤية الأمور الإبداعية التي يمكنكم معها.