การใช้ 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
ด้วย