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