ลบฟังก์ชันระยะหมดเวลาและกำจัดข้อบกพร่องของระบบ สิ่งที่คุณต้องมีคือ Scrollend
ก่อนเกิดเหตุการณ์ scrollend
ไม่มีวิธีที่เชื่อถือได้ในการตรวจจับว่าการเลื่อน
เสร็จสมบูรณ์ ซึ่งหมายความว่าเหตุการณ์จะเริ่มทำงานล่าช้าหรือในขณะที่ผู้ใช้แตะนิ้ว
ที่อยู่บนหน้าจอ ความไม่น่าเชื่อถือในการรู้เวลาที่การเลื่อน
ซึ่งนำไปสู่ข้อบกพร่อง
และประสบการณ์ที่ไม่ดีของผู้ใช้
document.onscroll = event => { clearTimeout(window.scrollEndTimer) window.scrollEndTimer = setTimeout(callback, 100) }
กลยุทธ์ setTimeout()
นี้ที่ดีที่สุดที่ทำได้คือการดูว่าการเลื่อนหยุดไปเป็นเวลาหรือไม่
100ms
ซึ่งทําให้ดูเหมือนว่าการเลื่อนเหตุการณ์หยุดชั่วคราว ไม่ได้เกิดจากการเลื่อน
กิจกรรมที่สิ้นสุด
หลังจาก
scrollend
เบราว์เซอร์จะทำการประเมินที่ยากนี้แทนคุณ
document.onscrollend = event => {…}
นั่นเป็นของดี ตั้งเวลาและบรรจุอย่างลงตัวและเต็มไปด้วยเงื่อนไขที่มีความหมาย ก่อนที่จะปล่อยออกมา
ลองใช้งาน
รายละเอียดเหตุการณ์
เหตุการณ์ scrollend
จะเริ่มทำงานในกรณีต่อไปนี้
- เบราว์เซอร์ไม่ทำให้เลื่อนหน้าจอเคลื่อนไหวหรือกำลังแปลอีกต่อไป
- ปล่อยการสัมผัสของผู้ใช้แล้ว
- เคอร์เซอร์ของผู้ใช้ปล่อยนิ้วโป้ง
- ปล่อยการกดแป้นของผู้ใช้แล้ว
- เลื่อนไปที่ส่วนย่อยเสร็จสมบูรณ์แล้ว
- การสแนปการเลื่อนเสร็จสมบูรณ์
- scrollTo()
เสร็จสมบูรณ์แล้ว
- ผู้ใช้เลื่อนวิวพอร์ตภาพ
เหตุการณ์ scrollend
จะไม่เริ่มทำงานในกรณีต่อไปนี้
- ท่าทางสัมผัสของผู้ใช้ไม่ทำให้เกิดการเปลี่ยนแปลงตำแหน่งของการเลื่อน (ไม่มีการแปล)
- scrollTo()
ไม่มีผลลัพธ์ในการแปลใดๆ
เหตุผลที่เหตุการณ์นี้ใช้เวลานานมากกว่าจะมาถึงแพลตฟอร์มเว็บก็เพราะ
รายละเอียดเล็กๆ น้อยๆ
ที่จำเป็นรายละเอียดข้อกำหนด ในพื้นที่ที่ซับซ้อนที่สุดแห่งหนึ่ง
แสดงรายละเอียดของ scrollend
สำหรับวิวพอร์ตภาพ
เทียบกับเอกสาร ลองนึกถึงหน้าเว็บที่คุณซูมเข้า คุณสามารถเลื่อนดู
เมื่ออยู่ในโหมดซูม และไม่จำเป็นต้องเลื่อน
เอกสาร โปรดมั่นใจได้ว่าแม้แต่การเลื่อนด้วยภาพของผู้ใช้ในวิวพอร์ตนี้
การโต้ตอบจะแสดงเหตุการณ์ scrollend
เมื่อเสร็จสิ้น
การใช้เหตุการณ์
คุณลงทะเบียน Listener ได้ 2 วิธีเช่นเดียวกับเหตุการณ์การเลื่อนอื่นๆ
addEventListener("scrollend", (event) => {
// scroll ended
});
aScrollingElement.addEventListener("scrollend", (event) => {
// scroll ended
});
หรือใช้พร็อพเพอร์ตี้เหตุการณ์ดังนี้
document.onscrollend = (event) => {
// scroll ended
};
aScrollingElement.onscrollend = (event) => {
// scroll ended
};
โพลีฟิลล์และการเพิ่มประสิทธิภาพแบบต่อเนื่อง
หากต้องการใช้กิจกรรมใหม่นี้ในตอนนี้ โปรดดูคำแนะนำที่ดีที่สุดจากเรา คุณสามารถ ยังคงใช้กลยุทธ์การเลื่อนสิ้นสุดปัจจุบัน (หากมี) และที่ เริ่มต้นจากการตรวจสอบการสนับสนุนด้วย:
'onscrollend' in window
// true, if available
ซึ่งจะรายงานว่าจริงหรือเท็จขึ้นอยู่กับว่าเบราว์เซอร์มีเหตุการณ์นั้นหรือไม่ ด้วย การตรวจสอบนี้ คุณจะสามารถกำหนดรหัสสาขา:
if ('onscrollend' in window) {
document.onscrollend = callback
}
else {
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
}
ซึ่งถือเป็นการเริ่มต้นที่ดีที่จะปรับปรุงกิจกรรม scrollend
อย่างต่อเนื่อง
พร้อมใช้งาน คุณยังสามารถลอง
polyfill
(NPM) ฉันทำสิ่งนี้ได้มากที่สุด
เบราว์เซอร์สามารถ:
import {scrollend} from "scrollyfills"
// then use scrollend as if it's existed this whole time
document.onscrollend = callback
Polyfill จะเพิ่มประสิทธิภาพขึ้นเรื่อยๆ เพื่อใช้เบราว์เซอร์ scrollend
ในตัว
กิจกรรม หากมี หากไม่มี สคริปต์จะดูเหตุการณ์ตัวชี้และ
เพื่อเลื่อนหาเวลาคาดการณ์
เวลาสิ้นสุดเหตุการณ์ได้ดีที่สุด
กรณีการใช้งาน
แนวทางปฏิบัติที่ดีคือเพื่อหลีกเลี่ยงการทำงานหนักด้านการคำนวณในขณะที่เลื่อนหน้าจอ
ยังเกิดขึ้นอยู่ วิธีนี้จะทำให้สามารถเลื่อนดูได้อย่างอิสระเพื่อใช้หน่วยความจำและ
เท่าที่ทำได้เพื่อให้การใช้งานเป็นไปอย่างราบรื่น ใช้เหตุการณ์ scrollend
จะทำให้ได้เวลาที่เหมาะสมในการพูดคุยและทำงานอย่างหนัก เพราะการเลื่อน
ที่จะเกิดขึ้นไม่ได้อีกต่อไป
คุณใช้เหตุการณ์ scrollend
เพื่อทริกเกอร์การทำงานต่างๆ ได้ Use Case ทั่วไป
จะซิงค์องค์ประกอบ UI ที่เกี่ยวข้องกับตำแหน่งที่การเลื่อน
หยุดแล้ว ดังตัวอย่างต่อไปนี้
- การซิงค์ตำแหน่งการเลื่อนภาพสไลด์กับสัญญาณบอกสถานะจุด
- การซิงค์รายการแกลเลอรีกับข้อมูลเมตา
- การดึงข้อมูลหลังจากที่ผู้ใช้เลื่อนไปที่แท็บใหม่
ลองนึกถึงสถานการณ์ เช่น เมื่อผู้ใช้ปัดอีเมลออกไป หลังจากดำเนินการเสร็จสิ้น คุณจะสามารถทำงานตามตำแหน่งที่ผู้ใช้เลื่อนหน้าจอไป
คุณยังใช้เหตุการณ์นี้เพื่อซิงค์ข้อมูลหลังจากแบบเป็นโปรแกรมหรือผู้ใช้ หรือการดำเนินการต่างๆ เช่น การบันทึก Analytics
นี่คือตัวอย่างที่ดีที่องค์ประกอบต่างๆ อย่างเช่นลูกศร จุด และโฟกัส จำเป็นต้องอัปเดตตามตำแหน่งการเลื่อน ดูวิธีที่ฉันสร้างภาพสไลด์นี้ใน YouTube นอกจากนี้ โปรดดูการสาธิตการใช้งานจริง
ขอขอบคุณ Mehdi Kazemi สำหรับงานวิศวกรรมเกี่ยวกับเรื่องนี้และ Robert Flack สำหรับคำแนะนำด้าน API และการนำไปใช้งาน