เหตุการณ์การสแนปการเลื่อน

Adam Argyle

ตั้งแต่ Chrome 129 เป็นต้นไป คุณจะใช้เหตุการณ์ scrollSnapChange และ scrollSnapChanging จาก JavaScript ได้ การใช้เหตุการณ์การจับภาพในตัวจะทำให้สถานะการจับภาพที่มองไม่เห็นก่อนหน้านี้สามารถดำเนินการได้ในเวลาที่เหมาะสมและถูกต้องเสมอ คุณจะไม่ได้รับสิทธิประโยชน์นี้หากไม่มีเหตุการณ์เหล่านี้

ก่อน scrollSnapChange คุณสามารถใช้ Intersection Observer เพื่อค้นหาองค์ประกอบที่ตัดผ่านพอร์ตการเลื่อนได้ แต่การกำหนดสิ่งที่จะแสดงผลแบบ Snap จะจำกัดอยู่ในบางกรณีเท่านั้น เช่น คุณสามารถตรวจจับได้ว่ารายการ Snap เต็มพื้นที่แถบเลื่อนหรือเต็มพื้นที่ส่วนใหญ่ของแถบเลื่อน โดยคุณจะต้องสังเกตองค์ประกอบที่ตัดกันของพื้นที่เลื่อน จากนั้นพิจารณาว่ารายการใดใช้พื้นที่เลื่อนส่วนใหญ่ แล้วถือว่ารายการนั้นเป็นเป้าหมายการจับคู่ จากนั้นรอ scrollend แล้วดำเนินการกับรายการที่จับคู่ (เป้าหมายการจับคู่)

แต่ก่อน scrollSnapChanging คุณจะไม่ทราบเลยว่าเป้าหมายการจับคู่กำลังเปลี่ยนแปลงหรือมีการเปลี่ยนแปลงเป็นอะไร (เช่น มีการเลื่อน)

ข่าวดีคือเหตุการณ์ใหม่เหล่านี้ทำให้ข้อมูลนี้พร้อมใช้งานอย่างรวดเร็วและง่ายดาย ซึ่งจะปลดล็อกการโต้ตอบด้วยการเลื่อนเพื่อแสดงข้อมูลให้แสดงได้มากกว่าความสามารถปัจจุบัน และช่วยให้สามารถจัดระเบียบความสัมพันธ์ของการเลื่อนเพื่อแสดงข้อมูลและสถานการณ์การตอบกลับ UI รูปแบบใหม่

scrollSnapChange

เหตุการณ์นี้จะทริกเกอร์ก็ต่อเมื่อท่าทางสัมผัสในการเลื่อนส่งผลให้มีการวางเป้าหมายการจับคู่ใหม่ และเป็นไปตามลําดับต่อไปนี้

1. หลังจากหยุดเลื่อน
2. ก่อนวันที่ scrollend

เหตุการณ์นี้จะทริกเกอร์ก่อน scrollend เมื่อการเลื่อนเสร็จสมบูรณ์ และเฉพาะในกรณีที่มีการวางเป้าหมายการจับใหม่ ซึ่งทำให้เหตุการณ์ดูช้าหรือเกิดขึ้นทันท่วงทีเมื่อท่าทางสัมผัสการเลื่อนเสร็จสมบูรณ์

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

เหตุการณ์จะแสดงรายการที่จับภาพในออบเจ็กต์เหตุการณ์เป็น snapTargetBlock และ snapTargetInline หากแถบเลื่อนเป็นแบบแนวนอนเท่านั้น พร็อพเพอร์ตี้ snapTargetBlock จะเป็น null ค่าของพร็อพเพอร์ตี้จะเป็นโหนดองค์ประกอบ

รายละเอียดที่ไม่ซ้ำกันสำหรับ scrollSnapChange

ไม่ทํางานจนกว่าผู้ใช้จะปล่อยท่าทาง

หากนิ้วยังคงอยู่บนหน้าจอหรืออยู่บนแทร็กแพด แสดงว่าผู้ใช้ยังเลื่อนนิ้วอยู่ ซึ่งหมายความว่าการเลื่อนยังไม่สิ้นสุด ซึ่งหมายความว่าเป้าหมายการจับคู่ยังไม่เปลี่ยนแปลง รอให้ผู้ใช้ทำท่าทางสัมผัสจนเสร็จสมบูรณ์

จะไม่ทํางานหากเป้าหมายการจับคู่ไม่เปลี่ยนแปลง

เหตุการณ์นี้มีไว้สำหรับการเปลี่ยนแปลงการยึด และหากเป้าหมายการยึดไม่เปลี่ยนแปลง เหตุการณ์จะไม่เริ่มทํางาน แม้ว่าผู้ใช้จะโต้ตอบกับแถบเลื่อนก็ตาม แต่ผู้ใช้ก็เลื่อนดูเนื้อหาจริง ดังนั้นเมื่อเลื่อนดูจนเสร็จสิ้น เหตุการณ์ scrollend จะยังคงทริกเกอร์

scrollSnapChanging

เหตุการณ์นี้จะทํางานทันทีที่เบราว์เซอร์ตัดสินใจว่าท่าทางสัมผัสการเลื่อนมีหรือจะส่งผลให้เกิดเป้าหมายการติดใหม่ โฆษณาแสดงขึ้นอย่างรวดเร็วและระหว่างการเลื่อน

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

เหตุการณ์จะแสดงรายการที่จับภาพในออบเจ็กต์เหตุการณ์เป็น snapTargetBlock และ snapTargetInline หากแถบเลื่อนเป็นแบบแนวตั้งเท่านั้น พร็อพเพอร์ตี้ snapTargetInline จะเป็น null ค่าของพร็อพเพอร์ตี้จะเป็นโหนดองค์ประกอบ

รายละเอียดที่ไม่ซ้ำกันสำหรับ scrollSnapChanging

เริ่มทํางานตั้งแต่เนิ่นๆ และบ่อยครั้งในระหว่างการเลื่อน

ซึ่งแตกต่างจาก scrollSnapChange ที่รอท่าทางสัมผัสการเลื่อนของผู้ใช้จนเสร็จสมบูรณ์ เหตุการณ์นี้จะทํางานทันทีขณะที่ผู้ใช้เลื่อนด้วยนิ้วหรือใช้แทร็กแพด สมมติว่าผู้ใช้เลื่อนช้าๆ โดยไม่ยกนิ้ว scrollSnapChanging จะทริกเกอร์หลายครั้งในระหว่างการใช้ท่าทางสัมผัส ตราบใดที่ผู้ใช้เลื่อนไปยังเป้าหมายการจับภาพหลายรายการที่เป็นไปได้ ทุกครั้งที่ผู้ใช้เลื่อน หากเบราว์เซอร์พิจารณาว่าเมื่อปล่อยนิ้ว หน้าเว็บจะหยุดอยู่ที่เป้าหมายการจับคู่ใหม่ เหตุการณ์จะเริ่มต้นขึ้นเพื่อบอกคุณว่าองค์ประกอบใดเป็นเป้าหมายนั้น

ไม่เรียกใช้เป้าหมายการจับภาพทั้งหมดตลอดเส้นทางไปยังเป้าหมายการจับภาพใหม่

นอกจากนี้ ให้พิจารณาการแตะสองครั้งอย่างรวดเร็วที่ผู้ใช้ใช้ท่าทางสัมผัสการเลื่อนเพื่อไปยังเป้าหมายการจับภาพหลายรายการพร้อมกัน เหตุการณ์นี้จะทริกเกอร์ 1 ครั้งกับเป้าหมายที่จะหยุด ดังนั้นจึงพร้อมให้บริการเป้าหมายการถ่ายภาพโดยเร็วที่สุดโดยไม่สิ้นเปลือง

กรณีการใช้งานและตัวอย่าง

เหตุการณ์เหล่านี้ช่วยให้เกิดกรณีการใช้งานใหม่ๆ มากมาย ทั้งยังทำให้การใช้รูปแบบปัจจุบันง่ายขึ้นมาก ตัวอย่างสำคัญอย่างหนึ่งคือการเปิดใช้ภาพเคลื่อนไหวที่ทริกเกอร์ด้วยการสแน็ป การแสดงรายการ Snap, รายการย่อยของรายการ Snap หรือข้อมูลที่เชื่อมโยงตามบริบทเมื่อเป็นเป้าหมายการจับภาพ

รูปแบบต่อไปนี้แสดง Use Case บางส่วนที่จะช่วยให้คุณทํางานได้อย่างมีประสิทธิภาพทันที

ไฮไลต์ข้อความรับรอง

ตัวอย่างนี้โปรโมตหรือเน้นที่ข้อความรับรองที่ตัดมา

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}

แสดงคำบรรยายของรายการที่จับภาพ

ตัวอย่างนี้แสดงคำบรรยายสำหรับรายการที่จับภาพ เหตุการณ์ทั้ง 2 รายการรวมอยู่ในการสาธิตนี้ คุณจึงเห็นความแตกต่างของเวลาและประสบการณ์ของผู้ใช้ระหว่าง scrollSnapChange กับ scrollSnapChanging

แสดงภาพเคลื่อนไหว 1 ครั้งสำหรับรายการย่อยของสไลด์งานนำเสนอที่หยุด

ตัวอย่างนี้จะรู้ว่าเมื่อใดที่ระบบแสดงสไลด์ใหม่และหยุดอยู่ที่สไลด์นั้น ซึ่งเป็นเวลาที่เหมาะอย่างยิ่งในการทำให้เนื้อหาเคลื่อนไหว 1 ครั้ง

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})

การสแนปทั้งบนแกน x และ y ในเครื่องมือเลื่อน

ฟีเจอร์เลื่อนไปยังจุดที่พอดีจะใช้งานได้กับแถบเลื่อนที่อนุญาตให้เลื่อนในแนวนอนและแนวตั้ง การสาธิตนี้แสดงทั้งเป้าหมาย scrollSnapChanging และ scrollSnapChange ขณะที่คุณเลื่อนดูตารางกริด การสาธิตนี้แสดงให้เห็นว่าองค์ประกอบที่เบราว์เซอร์กำลังจับคู่อาจไม่ใช่องค์ประกอบที่คุณคิดว่าเป็น

แถบเลื่อนที่ลิงก์กัน 2 แถบ

ตัวอย่างนี้มีคอนเทนเนอร์การเลื่อนแบบสแน็ป 2 รายการ โดยรายการหนึ่งเป็นรายการลิงก์ระดับสูง และอีกรายการเป็นเนื้อหาแบบหน้าเว็บจริง เหตุการณ์ scrollSnapChanging ใหม่ช่วยให้คุณลิงก์สถานะการถ่ายภาพของรายการเหล่านี้แบบ 2 ทิศทางได้อย่างง่ายดายเพื่อให้ข้อมูลซิงค์กันอยู่เสมอ

เครื่องมือเลือกสี OKLCH

การสาธิตนี้มีแถบเลื่อน 3 แถบ โดยแต่ละแถบแสดงช่องสีที่แตกต่างกันใน OKLCH รายการที่จับคู่จะซิงค์กับกลุ่มตัวเลือกที่เกี่ยวข้อง และสามารถดึงข้อมูลจากแบบฟอร์มที่รวมอินพุตได้ สําหรับผู้ใช้เมาส์หรือผู้ใช้ที่สัมผัส คุณสามารถเลื่อนไปยังค่าที่ต้องการ สําหรับผู้ใช้แป้นพิมพ์ คุณสามารถกด Tab และใช้ปุ่มลูกศรได้ โปรแกรมอ่านหน้าจอจะเห็นว่าเป็นเพียงแบบฟอร์ม

การจับภาพฮับแบบเคลื่อนไหวที่ซ้อนกัน

การสาธิตนี้ช่วยปรับปรุงประสบการณ์การเลื่อนแบบ Snap อย่างต่อเนื่องด้วยการเปลี่ยนผ่านที่ทริกเกอร์ด้วยการ Snap โดยใช้ scrollsnapchange

ตรวจสอบการรองรับเหตุการณ์ด้วย JavaScript ต่อไปนี้

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}

การป้อนข้อมูลด้วยไม้บรรทัดแบบเลื่อนได้

การสาธิตนี้แสดงไม้บรรทัดแบบเลื่อนได้เพื่อเป็นทางเลือกในการเลือกความยาวสำหรับอินพุตตัวเลข ป้อนค่าในช่องป้อนตัวเลขโดยตรงหรือเลื่อนไปที่ขนาด ระบบจะใช้เหตุการณ์การเปลี่ยนแปลงเพื่อล้างการเลือกระหว่างท่าทางสัมผัสของผู้ใช้ ส่วนเหตุการณ์การเปลี่ยนแปลงจะใช้เพื่ออัปเดตสถานะและเสริมการเลือกของผู้ใช้

ขั้นตอนการครอบคลุม

การแสดงตัวอย่างนี้สร้างขึ้นจากภาพเคลื่อนไหวที่ยอดเยี่ยมซึ่ง Bramus Van Damme สร้างขึ้นใหม่โดยอิงตามการเลื่อนของโฟลว์ภาพปก macOS ที่มีชื่อเสียง (มีบทแนะนำแบบวิดีโอด้วย) scrollSnapChanging ใช้เพื่อซ่อนชื่ออัลบั้ม และ scrollSnapChange ใช้เพื่อแสดงชื่อ เหตุการณ์เหล่านี้ช่วยจัดระเบียบการซ่อนชื่อเก่าอย่างเร่งด่วนและการแสดงชื่อใหม่อย่างช้าๆ

ไอเดียเพิ่มเติมเพื่อจุดประกายความคิดสร้างสรรค์

เมื่อทราบแล้วว่าองค์ประกอบใดกำลังจะยึดและองค์ประกอบใดยึดอยู่ คุณก็เปิดโอกาสใหม่ๆ อีกมากมายได้ ต่อไปนี้คือรายการไอเดียที่จะช่วยจุดประกายความคิดสร้างสรรค์และกรณีการใช้งานเพิ่มเติม

• การทริกเกอร์การโหลดแบบเลื่อนเวลา ซึ่งเรียกว่าการแสดงผลที่ทริกเกอร์โดยการเปลี่ยนแปลงอย่างรวดเร็วหรือการดึงข้อมูล
• ภาพขนาดย่อของแถบสไลด์ที่ลิงก์กับรูปภาพขนาดใหญ่
• สลับเล่น/หยุดชั่วคราวสำหรับตัวอย่างวิดีโอของภาพปกวิดีโอที่แสดง
• การติดตาม Analytics
• การเล่าเรื่องแบบเลื่อน
• UI/UX ของ Wheel of Fortune
• เป้าหมายการจับคู่จะมีเคล็ดลับเครื่องมือที่ยึดไว้
• แตะเพื่อจับภาพ
• สแน็ปเพื่อดู
• เสียงเมื่อใช้แอปสแนป
• UI การปัด
• แท็บหรือภาพสไลด์ที่ปัดได้

การศึกษาเพิ่มเติม

ทีม Chrome ยินดีที่จะได้ยินสิ่งที่คุณสร้างด้วย API ใหม่เหล่านี้ และหวังว่า API เหล่านี้จะช่วยปรับปรุงประสบการณ์การเลื่อนของคุณ

แหล่งข้อมูล

• ข้อกำหนด CSS
• คำอธิบายฟีเจอร์เลื่อน Snap
• เหตุการณ์ Snap ของ MDN
• คอลเล็กชัน CodePen