การกำหนดค่าพฤติกรรมการเลื่อน
scrollBehavior(to, from, savedPosition) การเลื่อนอย่างนุ่มนวล การเลื่อนไปยังแฮช และการคืนตำแหน่งเดิม
การกำหนดค่าพฤติกรรมการเลื่อน เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
การควบคุมการเลื่อนเมื่อมีการนำทาง
ในแอปแบบหน้าเดียว หน้าเว็บจะไม่โหลดใหม่ ดังนั้นเบราว์เซอร์จึงไม่รีเซ็ตตำแหน่งการเลื่อนให้ คุณสามารถใช้ฟังก์ชัน scrollBehavior ของ Vue Router เพื่อกำหนดว่าหน้าจะเลื่อนไปที่ใดหลังการนำทางแต่ละครั้ง
ฟังก์ชันนี้อยู่ที่ใด
ส่ง scrollBehavior ไปเมื่อสร้างเราเตอร์ ฟังก์ชันนี้จะทำงานทุกครั้งที่มีการนำทาง
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
// return a position
}
})พารามิเตอร์สามตัว
ฟังก์ชันนี้ได้รับ to ซึ่งคือเส้นทางเป้าหมาย from ซึ่งคือเส้นทางปัจจุบัน และ savedPosition โดยค่าหลังสุดจะไม่เป็นค่าว่างเฉพาะเมื่อการนำทางเกิดจากปุ่มย้อนกลับหรือไปข้างหน้าของเบราว์เซอร์
เลื่อนไปด้านบนสำหรับเส้นทางใหม่
พฤติกรรมที่ง่ายที่สุดคือ เลื่อนไปด้านบนทุกครั้งที่ผู้ใช้นำทางไปยังหน้าใหม่
scrollBehavior(to, from, savedPosition) {
return { top: 0 }
}การกู้คืนตำแหน่งเมื่อย้อนกลับ
เมื่อมี savedPosition ให้ส่งคืนค่านี้ เพื่อให้ปุ่มย้อนกลับพาผู้ใช้กลับไปยังตำแหน่งเดิมอย่างแม่นยำ ซึ่งสอดคล้องกับพฤติกรรมของเบราว์เซอร์ทั่วไป
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
return { top: 0 }
}เหตุใด savedPosition จึงสำคัญ
หากไม่กู้คืน savedPosition การกดย้อนกลับจะพาผู้ใช้ไปยังด้านบนสุดของรายการยาวที่เลื่อนดูมา การส่งคืนค่านี้จะช่วยรักษาตำแหน่งเดิมไว้
การเลื่อนไปยังจุดยึด
หาก URL เป้าหมายมีแฮช เช่น #section ให้เลื่อนไปยังองค์ประกอบนั้นโดยส่งคืนตัวเลือก el
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash }
}
return { top: 0 }
}การเลื่อนอย่างราบรื่น
เพิ่ม behavior: 'smooth' เพื่อทำภาพเคลื่อนไหวระหว่างการเลื่อน แทนการกระโดดไปยังตำแหน่งใหม่ทันที
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash, behavior: 'smooth' }
}
}การชดเชยสำหรับส่วนหัวแบบตรึง
ส่วนหัวแบบติดอยู่กับที่อาจบังจุดยึดเป้าหมาย เพิ่ม top เป็นค่าชดเชย เพื่อให้องค์ประกอบไปอยู่ด้านล่างส่วนหัว
scrollBehavior(to) {
if (to.hash) {
return { el: to.hash, top: 80 }
}
}การหน่วงเวลาการเลื่อน
หากเนื้อหาโหลดแบบอะซิงโครนัส ให้ส่งคืน Promise ที่แก้ไขด้วยตำแหน่งหลังจากหน่วงเวลา เพื่อให้องค์ประกอบเป้าหมายมีอยู่เมื่อเริ่มการเลื่อน
scrollBehavior(to, from, savedPosition) {
return new Promise((resolve) => {
setTimeout(() => resolve({ top: 0 }), 300)
})
}การรวมกฎต่าง ๆ
ตัวจัดการที่สมบูรณ์จะให้ความสำคัญกับตำแหน่งที่บันทึกไว้ก่อน จากนั้นจึงตรวจสอบจุดยึดจากแฮช และสุดท้ายใช้ตำแหน่งด้านบนเป็นค่าเริ่มต้น
scrollBehavior(to, from, savedPosition) {
if (savedPosition) return savedPosition
if (to.hash) return { el: to.hash, behavior: 'smooth' }
return { top: 0 }
}ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความรู้เกี่ยวกับพฤติกรรมการเลื่อน
บทสรุป
scrollBehavior ควบคุมการเลื่อนเมื่อมีการนำทาง
- รับ to, from และ savedPosition
- ส่งคืน savedPosition เพื่อกู้คืนตำแหน่งเมื่อกดปุ่มย้อนกลับ
- ส่งคืน { el: to.hash } เพื่อเลื่อนไปยังจุดยึด
- ส่งคืน { top: 0 } สำหรับการนำทางครั้งใหม่ไปยังเส้นทางใหม่
คำถามที่พบบ่อย
บทเรียน “การกำหนดค่าพฤติกรรมการเลื่อน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การกำหนดค่าพฤติกรรมการเลื่อน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดค่าพฤติกรรมการเลื่อน”
scrollBehavior(to, from, savedPosition) การเลื่อนอย่างนุ่มนวล การเลื่อนไปยังแฮช และการคืนตำแหน่งเดิม คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การกำหนดค่าพฤติกรรมการเลื่อน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฟิลด์เมทาของเส้นทางและการกำหนดชนิด
- การเปลี่ยนเส้นทางและแอนิเมชัน
- การกำหนดค่าพฤติกรรมการเลื่อน
- การนำทางด้วยโปรแกรมและ useRouter