คุณและผู้ใช้ต้องการเว็บแอปบนอุปกรณ์เคลื่อนที่ที่ตอบสนองและเลื่อนได้อย่างราบรื่นเมื่อสัมผัส การพัฒนาควรจะเป็นเรื่องง่าย แต่น่าเสียดายที่วิธีที่เว็บเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ตอบสนองต่อเหตุการณ์การแตะระหว่างการเลื่อนนั้นขึ้นอยู่กับรายละเอียดการใช้งานในข้อกำหนด TouchEvent ด้วยเหตุนี้ แนวทางต่างๆ จึงแบ่งออกเป็น 4 หมวดหมู่โดยคร่าวๆ สถานการณ์นี้แสดงให้เห็นถึงแรงกดดันพื้นฐานระหว่างการแสดงการเลื่อนที่ราบรื่นกับการรักษาการควบคุมของนักพัฒนาแอป
รูปแบบการประมวลผลเหตุการณ์การสัมผัส 4 แบบ
ความแตกต่างของลักษณะการทำงานระหว่างเบราว์เซอร์แบ่งออกเป็น 4 รูปแบบ
การประมวลผลเหตุการณ์แบบเรียลไทม์ตามปกติ
ระบบจะส่งเหตุการณ์การแตะขณะเลื่อน และแต่ละการอัปเดตการเลื่อนจะบล็อกจนกว่าการจัดการการแตะจะเสร็จสมบูรณ์ วิธีนี้มีข้อดีตรงที่เข้าใจง่ายที่สุดและมีประสิทธิภาพมากที่สุด แต่ส่งผลเสียต่อประสิทธิภาพการเลื่อน เนื่องจากแต่ละเฟรมระหว่างการเลื่อนต้องบล็อกในเธรดหลัก
เบราว์เซอร์: เบราว์เซอร์ Android (Android 4.0.4, 4.3), Mobile Safari (เมื่อเลื่อน div)
การประมวลผลการแตะเพื่อเลื่อนแบบอะซิงโครนัส
ระบบจะส่งเหตุการณ์การแตะเพื่อเลื่อนระหว่างการเลื่อน แต่การเลื่อนอาจดำเนินการแบบไม่พร้อมกัน (ระบบจะไม่สนใจเหตุการณ์การแตะเพื่อเลื่อนหลังจากที่การเลื่อนเริ่มต้นขึ้น) ซึ่งอาจส่งผลให้มี "การจัดการเหตุการณ์ซ้ำ" เช่น เลื่อนต่อไปหลังจากที่เว็บไซต์ดำเนินการบางอย่างกับเหตุการณ์การแตะแล้วเรียกใช้ preventDefault ในเหตุการณ์นั้น ซึ่งบอกให้เบราว์เซอร์ไม่จัดการเหตุการณ์ดังกล่าว
เบราว์เซอร์: Safari บนอุปกรณ์เคลื่อนที่ (เมื่อเลื่อนเอกสาร), Firefox
การแตะเพื่อเลื่อนถูกระงับขณะเลื่อน
ระบบจะไม่ส่งเหตุการณ์ Touchmove หลังจากที่การเลื่อนเริ่มต้นขึ้น และจะไม่ส่งต่อจนกว่าจะถึงเหตุการณ์ Touchend ในโมเดลนี้ ผู้ใช้จะแยกความแตกต่างระหว่างการแตะแบบคงที่กับการเลื่อนได้ยาก
เบราว์เซอร์: Samsung Browser (ส่งเหตุการณ์ mousemove)
Touchcancel on scroll start
คุณไม่สามารถใช้ทั้ง 2 แบบได้ ทั้งการเลื่อนที่ราบรื่นและการควบคุมของนักพัฒนาซอฟต์แวร์ และรูปแบบนี้จะแสดงให้เห็นถึงข้อดีข้อเสียระหว่างการเลื่อนที่ราบรื่นกับการจัดการเหตุการณ์อย่างชัดเจน ซึ่งคล้ายกับความหมายของข้อกำหนดเหตุการณ์เคอร์เซอร์ ประสบการณ์บางอย่างที่อาจต้องติดตามนิ้ว เช่น การปัดเพื่อรีเฟรช จะใช้งานไม่ได้
เบราว์เซอร์: Chrome เดสก์ท็อป M32 ขึ้นไป, Chrome Android
เหตุผลที่ควรเปลี่ยนแปลง
ปัจจุบัน Chrome สำหรับ Android ใช้รูปแบบเก่าของ Chrome: touchcancel ใน scroll start ซึ่งช่วยปรับปรุงประสิทธิภาพการเลื่อน แต่ทําให้นักพัฒนาซอฟต์แวร์สับสน โดยเฉพาะอย่างยิ่ง นักพัฒนาซอฟต์แวร์บางรายไม่ทราบเกี่ยวกับเหตุการณ์ touchcancel หรือวิธีจัดการกับเหตุการณ์ดังกล่าว ซึ่งทําให้บางเว็บไซต์ใช้งานไม่ได้ และที่สำคัญกว่านั้นคือเอฟเฟกต์และลักษณะการเลื่อน UI ทั้งหมด เช่น การปัดเพื่อรีเฟรช แถบซ่อน และจุดยึด นั้นใช้งานได้ยากหรือใช้งานไม่ได้เลย
Chrome มุ่งเน้นที่การเพิ่มองค์ประกอบพื้นฐานของแพลตฟอร์มที่ช่วยให้นักพัฒนาแอปใช้เอฟเฟกต์เหล่านี้ได้โดยตรง แทนที่จะเพิ่มฟีเจอร์ที่เขียนโค้ดไว้ล่วงหน้าเพื่อรองรับเอฟเฟกต์เหล่านี้โดยเฉพาะ ดูแพลตฟอร์มเว็บที่สมเหตุสมผลเพื่อดูการอธิบายทั่วไปเกี่ยวกับปรัชญานี้
รูปแบบใหม่ของ Chrome: รูปแบบ Touchmove แบบแอซิงค์ที่ควบคุม
Chrome กำลังเปิดตัวลักษณะการทำงานแบบใหม่ที่ออกแบบมาเพื่อปรับปรุงความเข้ากันได้กับโค้ดที่เขียนขึ้นสำหรับเบราว์เซอร์อื่นๆ เมื่อเลื่อน รวมถึงเปิดใช้สถานการณ์อื่นๆ ที่ต้องอาศัยเหตุการณ์การแตะเพื่อเลื่อนขณะเลื่อน ฟีเจอร์นี้เปิดใช้อยู่โดยค่าเริ่มต้น และคุณปิดฟีเจอร์นี้ได้โดยใช้ Flag chrome://flags\#touch-scrolling-mode
ลักษณะการทำงานใหม่มีดังนี้
- ระบบจะส่งการแตะเพื่อเลื่อนครั้งแรกพร้อมกันเพื่อให้สามารถยกเลิกการเลื่อน
- ขณะเลื่อนอยู่
- ระบบจะส่งเหตุการณ์ touchmove แบบอะซิงโครนัส
- จำกัดอยู่ที่ 1 เหตุการณ์ต่อ 200 มิลลิวินาที หรือหากมีเหตุการณ์เกินขอบเขตความคลาดเคลื่อน 15 พิกเซล ของ CSS
- Event.cancelable เป็น false
- มิเช่นนั้น เหตุการณ์การแตะเพื่อเลื่อนจะทํางานพร้อมกันตามปกติเมื่อการเลื่อนที่ใช้งานอยู่สิ้นสุดลงหรือทําไม่ได้เนื่องจากถึงขีดจํากัดการเลื่อน
- เหตุการณ์ touchend จะเกิดขึ้นเสมอเมื่อผู้ใช้ยกนิ้ว
คุณสามารถลองเดโมนี้ใน Chrome สำหรับ Android และเปิด/ปิด Flag เพื่อดูความแตกต่างchrome://flags\#touch-scrolling-mode
บอกให้เรารู้ว่าคุณคิดอย่างไร
รูปแบบการแตะแบบ Async มีศักยภาพในการปรับปรุงความเข้ากันได้ข้ามเบราว์เซอร์และเปิดใช้เอฟเฟกต์ท่าทางสัมผัสระดับใหม่ เราอยากทราบความคิดเห็นของนักพัฒนาแอปและอยากเห็นสิ่งที่คุณสร้างสรรค์ได้