ตั้งแต่ Chrome 81 เป็นต้นไป คุณไม่จำเป็นต้องเพิ่ม Listener เหตุการณ์เพื่อบังคับอีกต่อไป การจัดเฟรมใหม่
สแนปการเลื่อน CSS ช่วยให้นักพัฒนาเว็บสร้างประสบการณ์การเลื่อน ที่มีการควบคุมเป็นอย่างดีด้วยการประกาศ ตำแหน่งการสแนปการเลื่อน ข้อบกพร่องอย่างหนึ่งของการติดตั้งระบบปัจจุบันคือ การสแนปการเลื่อนจะทำงานได้ไม่ดีเมื่อเลย์เอาต์เปลี่ยนแปลง เช่น เมื่อวิวพอร์ต หรือหมุนอุปกรณ์ ข้อบกพร่องนี้ได้รับการแก้ไขแล้วใน Chrome 81
ความสามารถในการทำงานร่วมกัน
เบราว์เซอร์จำนวนมากรองรับการสแนปการเลื่อน CSS ในระดับพื้นฐาน ดูฉันใช้ CSS ได้ไหม เลื่อนสแนปไหมเพื่อดูข้อมูลเพิ่มเติม
ปัจจุบัน Chrome เป็นเบราว์เซอร์เดียวที่ใช้การสแนปการเลื่อนหลังการจัดวาง
การเปลี่ยนแปลง Firefox มี
ตั๋ว ที่เปิดอยู่สำหรับ
การใช้แอปพลิเคชันนี้และ Safari ยังมี
ตั๋วสำหรับการสแนปอีกครั้งหลัง
จะมีการเปลี่ยนแปลงเนื้อหาของแถบเลื่อน ในตอนนี้ คุณสามารถจำลองลักษณะการทำงานนี้ได้โดยการเพิ่ม
โค้ดต่อไปนี้ที่จะส่งไปยัง Listener เหตุการณ์เพื่อบังคับให้การสแนปดำเนินการ
javascript
scroller.scrollBy(0,0);
แต่วิธีนี้ไม่ได้เป็นการรับประกันว่าตัวเลื่อนจะสแนปกลับไปเหมือนเดิม
ข้อมูลเบื้องต้น
การสแนปการเลื่อน CSS
ฟีเจอร์ CSS Scroll Snap ช่วยให้นักพัฒนาเว็บสร้างโดย การเลื่อนโดยการประกาศตำแหน่งการสแนปการเลื่อน ตำแหน่งเหล่านี้ ตรวจสอบว่าเนื้อหาที่เลื่อนได้อยู่ในแนวเดียวกันกับคอนเทนเนอร์เพื่อ ปัญหาการเลื่อนที่ไม่ลื่นไหลได้ กล่าวคือ การสแนปการเลื่อนจะมีลักษณะดังนี้
- ป้องกันตำแหน่งการเลื่อนที่ไม่คุ้นเคยเมื่อเลื่อน
- สร้างเอฟเฟกต์ของการแบ่งหน้าเนื้อหา
บทความที่ใส่เลขหน้าและภาพสไลด์เป็นกรณีการใช้งานที่พบบ่อย 2 แบบสําหรับการเลื่อน ถ่ายทันที
ข้อบกพร่อง
การสแนปการเลื่อนช่วยให้ผู้ใช้ไปยังเนื้อหาต่างๆ ได้อย่างง่ายดาย ไม่สามารถปรับตัวตามการเปลี่ยนแปลงของเนื้อหาและเลย์เอาต์จะบล็อกศักยภาพบางอย่าง และสิทธิประโยชน์อื่นๆ ตามที่แสดงในตัวอย่าง ข้างต้น ผู้ใช้จะต้องปรับตำแหน่งการเลื่อนใหม่ เมื่อใดก็ตามที่ปรับขนาดหน้าต่างให้ ค้นหาองค์ประกอบที่สแนปก่อนหน้านี้ สถานการณ์ที่พบบ่อยบางส่วนซึ่งทําให้เลย์เอาต์ การเปลี่ยนแปลง ได้แก่
- การปรับขนาดหน้าต่าง
- การหมุนอุปกรณ์
- การเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2 สถานการณ์แรกทำให้การสแนปการเลื่อน CSS น่าสนใจสำหรับผู้ใช้และ ข้อที่ 3 คือฝันร้ายสำหรับนักพัฒนาซอฟต์แวร์เวลาแก้ไขข้อบกพร่อง นอกจากนี้ นักพัฒนาแอปยังต้อง ให้คำนึงถึงข้อบกพร่องเหล่านี้เมื่อพยายามสร้างประสบการณ์แบบไดนามิก รองรับการดำเนินการต่างๆ เช่น การเพิ่ม การนำออก หรือการย้ายเนื้อหา
การแก้ไขที่พบบ่อยสำหรับกรณีนี้คือการเพิ่ม Listener ที่ดำเนินการการเลื่อนแบบเป็นโปรแกรมผ่านทาง JavaScript เพื่อบังคับให้การสแนปทำงานเมื่อมีเลย์เอาต์ที่ระบุเหล่านี้ มีการเปลี่ยนแปลง วิธีแก้ปัญหาชั่วคราวนี้อาจไม่มีประสิทธิภาพเมื่อผู้ใช้ต้องการ เพื่อกลับไปที่เนื้อหาเดิมเหมือนก่อนหน้านี้ การจัดการเพิ่มเติมใดๆ ดูเหมือนว่า JavaScript จะเกือบไม่เป็นไปตามวัตถุประสงค์ของฟีเจอร์ CSS นี้
การรองรับการสแนปใหม่ในตัวหลังจากการเปลี่ยนเลย์เอาต์ใน Chrome 81
ข้อบกพร่องที่กล่าวถึงไม่มีใน Chrome 81 แล้ว: แถบเลื่อนจะยังอยู่ จะถูกสแนปไว้แม้ว่าจะเปลี่ยนเลย์เอาต์แล้ว โดยจะประเมินตำแหน่งการเลื่อนอีกครั้งหลังจาก เปลี่ยนการจัดวาง และสแนปไปยังตำแหน่งการสแนปที่ใกล้ที่สุดอีกครั้ง หากจำเป็น ถ้า ก่อนหน้านี้มีการสแนปแถบเลื่อนไปยังองค์ประกอบที่ยังคงมีอยู่หลัง การเปลี่ยนเลย์เอาต์ จากนั้นตัวเลื่อนจะพยายามสแนปกลับไป โปรดทราบ จะเกิดอะไรขึ้นเมื่อเลย์เอาต์เปลี่ยนแปลง ตัวอย่าง
NOPE และเปลี่ยนการวางแนวของอุปกรณ์
จากแนวตั้งเป็นแนวนอน จะมีหน้าจอเปล่าปรากฏขึ้น ซึ่งบ่งบอกว่า
ตำแหน่งการสแนปการเลื่อนหายไป
NOPE ยังคงอยู่ในมุมมองแม้ว่าการวางแนวของอุปกรณ์จะเปลี่ยนไปหลายครั้ง
ดูการ์ดการสแนปอีกครั้งหลังจากการเปลี่ยนแปลงเลย์เอาต์ ข้อกำหนดเพิ่มเติม รายละเอียด
ตัวอย่าง: แถบเลื่อนแบบติดหนึบ
เมื่อใช้ "สแนปหลังจากเปลี่ยนแปลงเลย์เอาต์" นักพัฒนาแอปสามารถใช้แถบเลื่อนแบบติดหนึบได้ด้วย บรรทัดของ CSS:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
หากต้องการดูข้อมูลเพิ่มเติม ดูแชทสาธิตต่อไปนี้ UI สำหรับภาพ
งานในอนาคต
ตอนนี้เอฟเฟกต์การเลื่อนการสแนปใหม่ทั้งหมดทำงานทันทีแล้ว การติดตามผลที่เป็นไปได้คือ เพื่อรองรับการสแนปอีกครั้งด้วยการเลื่อนอย่างราบรื่น เอฟเฟกต์ ดูปัญหาข้อมูลจำเพาะ เพื่อดูรายละเอียด
ความคิดเห็น
ความคิดเห็นของคุณมีคุณค่ามากในการสแนปอีกครั้งหลังจากมีการเปลี่ยนแปลงเลย์เอาต์ให้ดียิ่งขึ้น ดังนั้น แล้วก็ลองใช้งาน และให้วิศวกร Chromium รู้สิ่งที่คุณ คิด