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