การใช้ 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 เป็นต้นไป และดูข้อมูลจำเพาะของ Chrome ได้ที่นี่
อย่าลืมแสดงความคิดเห็นให้เราทราบและแจ้งให้ผู้ให้บริการรายอื่นทราบด้วยหากต้องการให้ผู้ให้บริการสนับสนุน scrollRestoration ด้วย