การสแนปการเลื่อนหลังจากเปลี่ยนเลย์เอาต์

ตั้งแต่ Chrome 81 เป็นต้นไป คุณไม่จำเป็นต้องเพิ่ม Listener เหตุการณ์เพื่อบังคับอีกต่อไป การจัดเฟรมใหม่

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

ความสามารถในการทำงานร่วมกัน

เบราว์เซอร์จำนวนมากรองรับการสแนปการเลื่อน CSS ในระดับพื้นฐาน ดูฉันใช้ CSS ได้ไหม เลื่อนสแนปไหมเพื่อดูข้อมูลเพิ่มเติม

ปัจจุบัน Chrome เป็นเบราว์เซอร์เดียวที่ใช้การสแนปการเลื่อนหลังการจัดวาง การเปลี่ยนแปลง Firefox มี ตั๋ว ที่เปิดอยู่สำหรับ การใช้แอปพลิเคชันนี้และ Safari ยังมี ตั๋วสำหรับการสแนปอีกครั้งหลัง จะมีการเปลี่ยนแปลงเนื้อหาของแถบเลื่อน ในตอนนี้ คุณสามารถจำลองลักษณะการทำงานนี้ได้โดยการเพิ่ม โค้ดต่อไปนี้ที่จะส่งไปยัง Listener เหตุการณ์เพื่อบังคับให้การสแนปดำเนินการ javascript scroller.scrollBy(0,0); แต่วิธีนี้ไม่ได้เป็นการรับประกันว่าตัวเลื่อนจะสแนปกลับไปเหมือนเดิม

ข้อมูลเบื้องต้น

การสแนปการเลื่อน CSS

ฟีเจอร์ CSS Scroll Snap ช่วยให้นักพัฒนาเว็บสร้างโดย การเลื่อนโดยการประกาศตำแหน่งการสแนปการเลื่อน ตำแหน่งเหล่านี้ ตรวจสอบว่าเนื้อหาที่เลื่อนได้อยู่ในแนวเดียวกันกับคอนเทนเนอร์เพื่อ ปัญหาการเลื่อนที่ไม่ลื่นไหลได้ กล่าวคือ การสแนปการเลื่อนจะมีลักษณะดังนี้

  • ป้องกันตำแหน่งการเลื่อนที่ไม่คุ้นเคยเมื่อเลื่อน
  • สร้างเอฟเฟกต์ของการแบ่งหน้าเนื้อหา

บทความที่ใส่เลขหน้าและภาพสไลด์เป็นกรณีการใช้งานที่พบบ่อย 2 แบบสําหรับการเลื่อน ถ่ายทันที

วันที่ ตัวอย่างการสแนปการเลื่อน CSS
ตัวอย่างการสแนปการเลื่อน CSS ในตอนท้ายของ เลื่อนตรงกลางแนวนอนของรูปภาพอยู่ในแนวเดียวกับตรงกลางแนวนอน ของคอนเทนเนอร์แบบเลื่อนได้

ข้อบกพร่อง

ตำแหน่งการสแนปจะหายไปเมื่อปรับขนาดหน้าต่าง

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

  • การปรับขนาดหน้าต่าง
  • การหมุนอุปกรณ์
  • การเปิดเครื่องมือสำหรับนักพัฒนาเว็บ

2 สถานการณ์แรกทำให้การสแนปการเลื่อน CSS น่าสนใจสำหรับผู้ใช้และ ข้อที่ 3 คือฝันร้ายสำหรับนักพัฒนาซอฟต์แวร์เวลาแก้ไขข้อบกพร่อง นอกจากนี้ นักพัฒนาแอปยังต้อง ให้คำนึงถึงข้อบกพร่องเหล่านี้เมื่อพยายามสร้างประสบการณ์แบบไดนามิก รองรับการดำเนินการต่างๆ เช่น การเพิ่ม การนำออก หรือการย้ายเนื้อหา

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

การรองรับการสแนปใหม่ในตัวหลังจากการเปลี่ยนเลย์เอาต์ใน Chrome 81

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

ตำแหน่งการสแนปหายไป
การหมุนอุปกรณ์จะไม่รักษาตำแหน่งการสแนปใน Chrome 80 ไว้ หลังจากเลื่อนไปยังสไลด์ที่มีข้อความว่า NOPE และเปลี่ยนการวางแนวของอุปกรณ์ จากแนวตั้งเป็นแนวนอน จะมีหน้าจอเปล่าปรากฏขึ้น ซึ่งบ่งบอกว่า ตำแหน่งการสแนปการเลื่อนหายไป
คงตำแหน่งการสแนปไว้
การหมุนอุปกรณ์จะรักษาตำแหน่งการสแนปใน Chrome 81 ไว้ สไลด์ที่ ระบุว่า NOPE ยังคงอยู่ในมุมมองแม้ว่าการวางแนวของอุปกรณ์จะเปลี่ยนไปหลายครั้ง

ดูการ์ดการสแนปอีกครั้งหลังจากการเปลี่ยนแปลงเลย์เอาต์ ข้อกำหนดเพิ่มเติม รายละเอียด

ตัวอย่าง: แถบเลื่อนแบบติดหนึบ

เมื่อใช้ "สแนปหลังจากเปลี่ยนแปลงเลย์เอาต์" นักพัฒนาแอปสามารถใช้แถบเลื่อนแบบติดหนึบได้ด้วย บรรทัดของ CSS:

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

หากต้องการดูข้อมูลเพิ่มเติม ดูแชทสาธิตต่อไปนี้ UI สำหรับภาพ

การเพิ่มข้อความใหม่จะเป็นการสแนปอีกครั้งซึ่งทำให้ข้อความติดอยู่ด้านล่างใน Chrome 81.

งานในอนาคต

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

ความคิดเห็น

ความคิดเห็นของคุณมีคุณค่ามากในการสแนปอีกครั้งหลังจากมีการเปลี่ยนแปลงเลย์เอาต์ให้ดียิ่งขึ้น ดังนั้น แล้วก็ลองใช้งาน และให้วิศวกร Chromium รู้สิ่งที่คุณ คิด