ลบฟังก์ชันระยะหมดเวลาและกำจัดข้อบกพร่องของระบบ สิ่งที่คุณต้องมีคือ 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
เพื่อทริกเกอร์การทำงานต่างๆ ได้ กรณีการใช้งานที่พบบ่อยคือการซิงค์องค์ประกอบ UI ที่เชื่อมโยงกับตำแหน่งที่การเลื่อนหยุด ตัวอย่างเช่น
- การซิงค์ตำแหน่งการเลื่อนภาพหมุนกับสัญญาณบอกสถานะจุด
- การซิงค์รายการแกลเลอรีกับข้อมูลเมตา
- การดึงข้อมูลหลังจากที่ผู้ใช้เลื่อนไปที่แท็บใหม่
ลองนึกถึงสถานการณ์ เช่น เมื่อผู้ใช้ปัดอีเมลออกไป หลังจากเลื่อนนิ้วเสร็จแล้ว คุณจะดำเนินการตามตำแหน่งที่ผู้ใช้เลื่อนไปได้
คุณยังใช้เหตุการณ์นี้เพื่อซิงค์ข้อมูลหลังจากการเลื่อนแบบเป็นโปรแกรมหรือการเลื่อนโดยผู้ใช้ หรือการดำเนินการต่างๆ เช่น การบันทึกข้อมูลวิเคราะห์
นี่คือตัวอย่างที่ดีที่ต้องอัปเดตองค์ประกอบหลายรายการ เช่น ลูกศร จุด และโฟกัส ตามตำแหน่งการเลื่อน ดูวิธีที่ฉันสร้างภาพสไลด์นี้ใน YouTube นอกจากนี้ โปรดดูการสาธิตการใช้งานจริง
ขอขอบคุณ Mehdi Kazemi สำหรับงานวิศวกรรมเกี่ยวกับเรื่องนี้และ Robert Flack สำหรับคำแนะนำด้าน API และการนำไปใช้งาน