เหตุใดจึงเพิ่ม scrollTo(0, 0) และ blur() เมื่อนำทางไปหน้าละเอียด

ภูมิหลัง

ในแอพสำหรับลูกค้าเช่า DVD เราเปลี่ยนหน้าโดยใช้ตัวแปร currentPage ใน App.vue โดยไม่ใช้ Vue Router เมื่อนำทางจากหน้ารายการไปยังหน้าละเอียด มีการเพิ่มโค้ดต่อไปนี้:

window.scrollTo(0, 0)
;(document.activeElement as HTMLElement)?.blur()

เหตุผลสำหรับ scrollTo(0, 0)

เมื่อนำทางไปหน้าละเอียด หากผู้ใช้เลื่อนลงในรายการ หน้าละเอียดจะเปิดที่ตำแหน่งที่เลื่อนนั้น เพื่อหลีกเลี่ยงสิ่งนี้ เราเลื่อนไปด้านบนสุดอย่างชัดเจนเมื่อนำทาง

เหตุผลสำหรับ blur()

หลังจากกดปุ่ม ปุ่มจะยังคง focus (focus ยังคงอยู่ที่ element) หากไม่ล้าง focus ปุ่มจะดูเหมือนยังคง “ถูกเลือก” ซึ่งอาจรู้สึกไม่เป็นธรรมชาติ การเรียก blur() ล้าง focus และให้ประสบการณ์ผู้ใช้ที่สะอาดกว่า

ผลลัพธ์

การเพิ่มสองบรรทัดนี้ทำให้พฤติกรรมการเปลี่ยนหน้าเป็นธรรมชาติมากขึ้น