การใช้ History API เพื่อจัดการ URL นั้นยอดเยี่ยมมาก และยังเป็นฟีเจอร์สําคัญของเว็บแอปที่ดี อย่างไรก็ตาม ข้อเสียอย่างหนึ่งคือระบบจะจัดเก็บตำแหน่งการเลื่อน และที่สำคัญกว่านั้นคือกู้คืนทุกครั้งที่คุณไปยังส่วนต่างๆ ในประวัติการท่องเว็บ ซึ่งมักจะหมายถึงการกระโดดที่ไม่สวยงามเมื่อตำแหน่งการเลื่อนเปลี่ยนไปโดยอัตโนมัติ และยิ่งเป็นเช่นนั้นหากแอปของคุณมีการเปลี่ยนเฟรมหรือเปลี่ยนแปลงเนื้อหาของหน้าเว็บไม่ว่าด้วยวิธีใดก็ตาม ซึ่งท้ายที่สุดแล้วจะทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่แย่
ปัญหายิ่งแย่ลงเมื่อคุณทำอะไรได้น้อยมากเกี่ยวกับเรื่องนี้ เนื่องจาก Chrome จะทริกเกอร์เหตุการณ์ popState ก่อนเหตุการณ์ scroll ซึ่งหมายความว่าคุณสามารถอ่านตำแหน่งการเลื่อนปัจจุบันใน popState แล้วเปลี่ยนกลับในตัวแฮนเดิลเหตุการณ์ scroll ด้วย window.scrollTo (น่าเบื่อ แต่อย่างน้อยก็ใช้งานได้) แต่ Firefox จะทริกเกอร์เหตุการณ์ scroll ก่อน popState คุณจึงไม่ทราบค่าการเลื่อนเดิมที่จะกู้คืน บัดซบ
อย่างไรก็ตาม ข่าวดีคือเราอาจแก้ไขปัญหาได้โดยใช้ history.scrollRestoration โดยค่าสตริงที่ใช้ได้ 2 ค่า ได้แก่ auto ซึ่งจะเก็บทุกอย่างไว้เหมือนเดิม (และเป็นค่าเริ่มต้น) และ manual ซึ่งหมายความว่าคุณในฐานะนักพัฒนาแอปจะเป็นเจ้าของการเปลี่ยนแปลงการเลื่อนที่อาจจำเป็นเมื่อผู้ใช้ไปยังส่วนต่างๆ ในประวัติของแอป หากจำเป็น คุณสามารถติดตามตำแหน่งการเลื่อนขณะที่กดรายการประวัติด้วย history.pushState()
ฟีเจอร์นี้ใหม่และอยู่ในขั้นทดลอง (แต่เจ๋งสุดๆ) ดังนั้นโปรดตรวจสอบว่าฟีเจอร์นี้พร้อมใช้งานก่อนใช้
if ('scrollRestoration' in history) {
// Back off, browser, I got this...
history.scrollRestoration = 'manual';
}
คุณจะเห็น history.scrollRestoration ใน Chrome 46 ขึ้นไป และดูข้อมูลจำเพาะได้ที่นี่
อย่าลืมแสดงความคิดเห็นให้เราทราบและแจ้งให้พาร์ทเนอร์รายอื่นๆ ทราบด้วยหากต้องการให้พาร์ทเนอร์รายดังกล่าวรองรับ scrollRestoration ด้วย