ขอขอบคุณที่ติดตาม Google I/O ดูเนื้อหาตามคำขอ

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Adam Argyle

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

การรองรับเบราว์เซอร์

แหล่งที่มา

การรองรับเบราว์เซอร์

แหล่งที่มา

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

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

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

ลองใช้เลย
https://codepen.io/web-dot-dev/pen/jOjaaEP

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

scrollSnapChange

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

หลังจากที่การเลื่อนหยุดลงแล้ว
ก่อนวันที่ 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 หรือข้อมูลที่เชื่อมโยงตามบริบทเมื่อเป็นเป้าหมายการจับภาพ

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

ไฮไลต์คำนิยม

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

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

https://codepen.io/web-dot-dev/pen/dyBZZPe

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

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

Snap Changing
https://codepen.io/web-dot-dev/pen/wvLPPBL

กดเปลี่ยนแปลง
https://codepen.io/web-dot-dev/pen/QWXOObw

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

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

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

https://codepen.io/web-dot-dev/pen/rNEYYVj

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

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

ตารางกริดสี่เหลี่ยมจัตุรัสในแถบเลื่อนแนวนอนและแนวตั้งจะปรากฏขึ้น เส้นขอบประแสดงถึงเป้าหมาย scrollSnapChanging และเส้นขอบทึบคือเป้าหมาย scrollSnapChange สีแดงแสดง snapTargetInline และสีน้ำเงินแสดง snapTargetBlock

https://codepen.io/web-dot-dev/pen/qBzVVdp

แถบเลื่อนที่ลิงก์ไว้ 2 รายการ

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

https://codepen.io/web-dot-dev/pen/YzoEEXj

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

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

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

https://codepen.io/web-dot-dev/pen/OJeOOVG

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

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

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

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

https://codepen.io/web-dot-dev/pen/MWMOOae

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

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

https://codepen.io/web-dot-dev/pen/LYKOOpd

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

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

https://codepen.io/web-dot-dev/pen/Bagmmog

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

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

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

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

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