สิ่งหนึ่งที่ผู้ใช้ต้องการจริงๆ จากการเลื่อนคือความลื่นไหล ที่ผ่านมา Chrome มีการเลื่อนที่ราบรื่นในบางตำแหน่ง เช่น เมื่อผู้ใช้เลื่อนด้วยแทร็กแพด หรือปัดหน้าเว็บในอุปกรณ์เคลื่อนที่ แต่หากผู้ใช้เสียบเมาส์ไว้ ลักษณะการเลื่อนแบบ "เป็นขั้นๆ" จะมีความกระตุกมากขึ้น ซึ่งดูไม่สวยงาม การดำเนินการทั้งหมดนี้กำลังจะเปลี่ยนแปลงใน Chrome 49
โซลูชันสำหรับลักษณะการเลื่อนแบบเป็นขั้นๆ ของอุปกรณ์ที่ทำงานด้วยอินพุตสำหรับนักพัฒนาแอปจำนวนมากคือการใช้ไลบรารี โดยมีเป้าหมายเพื่อแมปใหม่ให้ลื่นไหลและดูสบายตายิ่งขึ้น ผู้ใช้ยังดำเนินการนี้ผ่านส่วนขยายได้ด้วย อย่างไรก็ตาม ทั้งไลบรารีและส่วนขยายที่เปลี่ยนการเลื่อนมีข้อเสียดังนี้
- ความรู้สึกอึดอัด ปัญหานี้แสดงออกมาได้ 2 ลักษณะ ประการแรกคือ เว็บไซต์หนึ่งอาจเลื่อนได้อย่างราบรื่น แต่อีกเว็บไซต์หนึ่งอาจไม่ราบรื่น ผู้ใช้จึงอาจรู้สึกสับสนเนื่องจากความไม่สอดคล้องกัน ประการที่ 2 ฟิสิกส์ความลื่นไหลของไลบรารีไม่จำเป็นต้องตรงกับของแพลตฟอร์ม ดังนั้น แม้ว่าการเคลื่อนไหวจะราบรื่น แต่ก็อาจดูไม่ถูกต้องหรือน่าอึดอัด
- แนวโน้มที่เพิ่มขึ้นของการแย่งชิงเธรดหลักและความกระตุก เช่นเดียวกับ JavaScript ที่เพิ่มลงในหน้าเว็บ ภาระของ CPU จะเพิ่มขึ้น การดำเนินการนี้อาจไม่ส่งผลเสียเสมอไป ทั้งนี้ขึ้นอยู่กับสิ่งที่หน้าเว็บกำลังทำอยู่ แต่หากมีการดำเนินการที่ใช้เวลานานในเธรดหลัก และการเลื่อนมีการเชื่อมโยงกับเธรดหลัก ผลลัพธ์ที่ได้อาจเป็นการเลื่อนที่กระตุกและสะดุด
- การดูแลรักษามากขึ้นสำหรับนักพัฒนาแอป โค้ดที่ผู้ใช้ต้องดาวน์โหลดมากขึ้น การมีไลบรารีสำหรับการเลื่อนที่ราบรื่นเป็นสิ่งที่ต้องอัปเดตและดูแลรักษาอยู่เสมอ และจะทำให้หน้าเว็บโดยรวมของเว็บไซต์มีขนาดใหญ่ขึ้น
ข้อเสียเหล่านี้มักเกิดขึ้นกับไลบรารีหลายรายการที่จัดการกับลักษณะการเลื่อน ไม่ว่าจะเป็นเอฟเฟกต์พารัลแลกซ์หรือภาพเคลื่อนไหวอื่นๆ ที่เชื่อมโยงกับการเลื่อน โฆษณาเหล่านี้มักทำให้เกิดอาการกระตุก ขัดขวางการช่วยเหลือพิเศษ และโดยทั่วไปแล้วส่งผลเสียต่อประสบการณ์ของผู้ใช้ การเลื่อนเป็นองค์ประกอบการโต้ตอบหลักของเว็บ และคุณควรระมัดระวังอย่างยิ่งในการแก้ไขการเลื่อนด้วยไลบรารี
ใน Chrome 49 ลักษณะการเลื่อนเริ่มต้นจะเปลี่ยนไปใน Windows, Linux และ ChromeOS ลักษณะการเลื่อนแบบขั้นๆ แบบเก่าจะหายไป และการเลื่อนจะราบรื่นโดยค่าเริ่มต้น คุณไม่จำเป็นต้องเปลี่ยนแปลงโค้ดใดๆ ยกเว้นในกรณีที่ต้องนำไลบรารีการเลื่อนที่ราบรื่นออกหากคุณใช้อยู่
ฟีเจอร์การเลื่อนเพิ่มเติม
นอกจากนี้ เรายังมีฟีเจอร์อื่นๆ ที่เกี่ยวข้องกับการเลื่อนที่ควรกล่าวถึงด้วย พวกเราหลายคนต้องการเอฟเฟกต์ที่ทำงานร่วมกับการเลื่อน เช่น การแสดงภาพแบบพารัลแลกซ์ การเลื่อนไปยังส่วนต่างๆ ของเอกสารอย่างราบรื่น (เช่น example.com/#somesection) ดังที่ได้กล่าวไปก่อนหน้านี้ แนวทางที่ใช้ในปัจจุบันมักส่งผลเสียต่อทั้งนักพัฒนาแอปและผู้ใช้ ขณะนี้มีมาตรฐานแพลตฟอร์ม 2 รายการที่อาจช่วยได้ ได้แก่ Worklet คอมโพสิเตอร์และพร็อพเพอร์ตี้ scroll-behavior CSS
Houdini
เวิร์กเลตของโปรแกรมคอมโพสิตเป็นส่วนหนึ่งของ Houdini และยังไม่ได้ระบุข้อกำหนดและใช้งานอย่างเต็มรูปแบบ อย่างไรก็ตาม เมื่อแพตช์พร้อมใช้งาน คุณจะสามารถเขียน JavaScript ที่ทำงานเป็นส่วนหนึ่งของไปป์ไลน์ของคอมโพสิต ซึ่งโดยทั่วไปหมายความว่าเอฟเฟกต์ที่เชื่อมโยงกับการเลื่อน เช่น การแสดงผลแบบพารัลแลกซ์ จะซิงค์กับตำแหน่งการเลื่อนปัจจุบันอย่างสมบูรณ์ เมื่อพิจารณาถึงวิธีจัดการการเลื่อนในปัจจุบัน ซึ่งระบบจะส่งเหตุการณ์การเลื่อนไปยังเธรดหลักเป็นระยะๆ เท่านั้น (และอาจถูกบล็อกโดยงานอื่นๆ ของเธรดหลัก) การเปลี่ยนแปลงนี้ถือเป็นก้าวกระโดดครั้งใหญ่ หากสนใจเวิร์กเลตของ Compositor หรือฟีเจอร์ใหม่อื่นๆ ที่น่าตื่นเต้นของ Houdini โปรดอ่านโพสต์แนะนำ Houdini โดย Surma, ข้อมูลจำเพาะของ Houdini และแชร์ความคิดเห็นของคุณในรายชื่ออีเมลของ Houdini
scroll-behavior
สําหรับการเลื่อนตามข้อมูลโค้ด scroll-behavior คุณสมบัติ CSS เป็นอีกสิ่งหนึ่งที่อาจช่วยได้ หากต้องการลองใช้ คุณยินดีที่ได้ทราบว่าฟีเจอร์นี้พร้อมใช้งานใน Firefox แล้ว และคุณสามารถเปิดใช้ใน Chrome Canary โดยใช้ Flag "เปิดใช้ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลอง" หากคุณตั้งค่าองค์ประกอบ <body> เป็น scroll-behavior: smooth การเลื่อนทั้งหมดที่ทริกเกอร์โดยการเปลี่ยนแปลงของข้อมูลโค้ดหรือ window.scrollTo จะมีภาพเคลื่อนไหวอย่างราบรื่น ซึ่งดีกว่ามากเมื่อเทียบกับการใช้และดูแลรักษาโค้ดจากไลบรารีที่พยายามทําสิ่งเดียวกัน สิ่งสำคัญอย่างยิ่งในการเลื่อนคือต้องไม่ทำให้ผู้ใช้ผิดหวัง ดังนั้นแม้ว่าฟีเจอร์เหล่านี้จะเปลี่ยนแปลงไปเรื่อยๆ แต่ก็ยังควรใช้แนวทางการปรับปรุงแบบเป็นขั้นเป็นตอนและนำไลบรารีที่พยายามใช้ polyfill ลักษณะการทำงานเหล่านี้ออก
เลื่อนไปข้างหน้า
ตั้งแต่ Chrome 49 เป็นต้นไป การเลื่อนจะราบรื่นขึ้น แต่นั่นไม่ใช่ทั้งหมด ยังมีการปรับปรุงอื่นๆ ที่อาจเกิดขึ้นผ่าน Houdini และพร็อพเพอร์ตี้ CSS เช่น smooth-scroll ลองใช้ Chrome 49 แล้วบอกเราว่าคุณคิดเห็นอย่างไร และที่สำคัญที่สุดคือให้เบราว์เซอร์เลื่อนให้คุณ