API ประวัติ - การกู้คืนการเลื่อน

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