ตั้งแต่ Chrome 81 เป็นต้นไป คุณไม่จำเป็นต้องเพิ่ม Listener เหตุการณ์เพื่อบังคับให้สแนปอีกครั้งอีกต่อไป
CSS Scroll Snap ช่วยให้นักพัฒนาเว็บสร้างประสบการณ์การเลื่อนที่ควบคุมได้ดีด้วยการประกาศตำแหน่งการสแนปการเลื่อน ข้อบกพร่องอย่างหนึ่งของการใช้งานในปัจจุบันคือ การสแนปการเลื่อนได้ไม่ดีเมื่อเลย์เอาต์เปลี่ยนไป เช่น เมื่อมีการปรับขนาดวิวพอร์ตหรือหมุนอุปกรณ์ ข้อบกพร่องนี้ได้รับการแก้ไขใน Chrome 81
ความสามารถในการทำงานร่วมกัน
เบราว์เซอร์จำนวนมากมีการรองรับพื้นฐานสำหรับ CSS Scroll Snap ดูข้อมูลเพิ่มเติมได้ที่ฉันใช้ CSS Scroll Snap ได้ไหม
ปัจจุบัน Chrome เป็นเพียงเบราว์เซอร์เดียวที่ใช้การสแนปการเลื่อนหลังจากการเปลี่ยนแปลงเลย์เอาต์ Firefox มีตั๋วพร้อมให้นำไปใช้งาน และ Safari ยังมีตั๋วแบบเปิดสำหรับจัดสแนปอีกครั้งหลังจากที่เนื้อหาของตัวเลื่อนเปลี่ยนแปลง ในตอนนี้ คุณจำลองลักษณะการทำงานนี้ได้โดยการเพิ่มโค้ดต่อไปนี้ลงใน Listener เหตุการณ์เพื่อบังคับให้การสแนปดำเนินการ
javascript
scroller.scrollBy(0,0);
อย่างไรก็ตาม วิธีนี้ไม่ได้เป็นการรับประกันว่าตัวเลื่อนจะสแนปกลับไปยังองค์ประกอบเดียวกัน
ที่มา
สแนปการเลื่อน CSS
ฟีเจอร์ Scroll Snap ของ CSS ช่วยให้นักพัฒนาเว็บสร้างประสบการณ์การเลื่อนที่ควบคุมได้ดีโดยการประกาศตำแหน่งการสแนปการเลื่อน ตำแหน่งเหล่านี้ช่วยให้แน่ใจว่าเนื้อหาที่เลื่อนได้จะอยู่ในแนวเดียวกับคอนเทนเนอร์อย่างเหมาะสมเพื่อข้ามปัญหาเกี่ยวกับการเลื่อนที่ไม่แม่นยำ กล่าวคือ ใช้การสแนปการเลื่อน:
- ป้องกันไม่ให้เลื่อนตำแหน่งได้อึดอัดใจเมื่อเลื่อน
- สร้างเอฟเฟกต์การเลื่อนดูเนื้อหา
บทความที่ใส่เลขหน้าและภาพสไลด์เป็น 2 กรณีการใช้งานที่พบบ่อยสำหรับการสแนปการเลื่อน
ข้อบกพร่อง
การสแนปการเลื่อนช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของเนื้อหาได้อย่างง่ายดาย แต่การปรับให้เข้ากับเนื้อหาและเลย์เอาต์ที่เปลี่ยนแปลงไปจะบล็อกประโยชน์บางอย่างที่อาจเกิดขึ้น ดังที่แสดงในตัวอย่างด้านบน ผู้ใช้จะต้องปรับตำแหน่งการเลื่อนอีกครั้งเมื่อใดก็ตามที่ปรับขนาดหน้าต่างเพื่อค้นหาองค์ประกอบที่สแนปไว้ก่อนหน้านี้ ตัวอย่างสถานการณ์ทั่วไปที่ทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์มีดังนี้
- การปรับขนาดหน้าต่าง
- การหมุนอุปกรณ์
- การเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2 สถานการณ์แรกทำให้ CSS Scroll Snap น่าสนใจน้อยลงสำหรับผู้ใช้และสถานการณ์ที่ 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 ทราบว่าคุณคิดอย่างไร