คำแนะนำเกี่ยวกับ CSS Scroll Snap Points

CSS Scroll Snap Module เป็นมาตรฐานเว็บที่ให้การควบคุมแก่เรา เลื่อนบนหน้าเว็บ เพื่อให้เราสามารถทำให้ผู้ใช้เลื่อนไปที่บางส่วนของหน้าแทนที่จะไปที่ใดก็ได้บนหน้านั้น.

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

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

เลื่อนโดยไม่ต้องเลื่อนจุดสแน็ป

โดยทั่วไปเราจะไม่เลื่อนช้ามากโดยเฉพาะในโทรศัพท์ ยิ่งคุณเลื่อนเร็วเท่าไหร่ก็จะยิ่งควบคุมน้อยลงเท่านั้น คุณจะอยู่ที่ไหนบนหน้าจอ เมื่อคุณหยุดเลื่อน.

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

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

เลื่อนด้วยจุดสแน็ปเลื่อน

นี่คือสิ่งที่เรานำมา CSS เลื่อนจุด snap. ชื่อนี้อธิบายตนเอง มันเป็นมาตรฐาน CSS ที่ช่วยให้เรา จัดรายการให้เข้าที่ เมื่อเลื่อน.

มี ห้าคุณสมบัติ CSS ที่ประกอบด้วยมาตรฐานนี้:

1. เลื่อนสแน็ปอินประเภท
2. เลื่อนสแน็ปอินจุด x
3. เลื่อนสแน็ปอินจุด-Y
4. เลื่อนสแน็ปอินประสานงาน
5. เลื่อนสแน็ปอินปลายทาง

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

มีสรรพคุณ จำเป็นต้อง -WebKit และ -นางสาว คำนำหน้า สำหรับเบราว์เซอร์ที่เกี่ยวข้อง ขณะที่เขียนบทความนี้ CSS และ snap snap ไม่รองรับใน Chrome และ Opera.

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

อย่างไรก็ตามพวกเขาจะ มีวัตถุประสงค์ที่คล้ายกัน เป็นคุณสมบัติเดิม ปัจจุบันชุดของคุณสมบัติเดิมจะใช้ได้ดี.

คุณสมบัติ

คุณจำเป็นต้อง เพิ่ม เลื่อนสแน็ปอินประเภท คุณสมบัติไปยังคอนเทนเนอร์เลื่อน (องค์ประกอบคอนเทนเนอร์ที่มีเด็ก ๆ ล้นในขณะที่เลื่อน) มันระบุ ความเข้มงวดของแอ็คชั่น snap. สามารถใช้ค่าสามค่า:

1. จำเป็น - เมื่อการเลื่อนเสร็จสิ้นการเลื่อนจะ snap ที่จุด snap ที่เกี่ยวข้อง
2. ความใกล้ชิด - เข้มงวดน้อยกว่า จำเป็น; มันจะ ขึ้นอยู่กับการตัดสินของ UA ไม่ว่าจะเป็นองค์ประกอบจะ snap ที่จุด snap ที่กำหนด
3. ไม่มี - ไม่มีการจัดระยะ

เลื่อนสแน็ปอินจุด x และ เลื่อนสแน็ปอินจุด-Y คุณสมบัติ เป็นของภาชนะเลื่อน, เกินไป. พวกเขาอ้างถึงจุดบนแกน x และแกน y ที่จุด snap จะอยู่ ค่าของพวกเขาคือ ที่กำหนดโดย ซ้ำ () ฟังก์ชัน. ตัวอย่างเช่นหากคุณต้องการเพิ่มคะแนน snap ตามแกน x ในช่วงเวลาของ 100px คุณต้องใช้ scroll-snap-points-x: ทำซ้ำ (100px) กฎ.

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

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

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

ตัวอย่างรหัส

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

 div width: 300px; ความสูง: 300px; ล้น: อัตโนมัติ; ...  div> img width: 250px; ความสูง: 150px; … 

ตอนนี้เรา เพิ่มคะแนน snap บางส่วน ไปยังภาชนะเลื่อน:

 div width: 300px; ล้น: อัตโนมัติ; scroll-snap-points-y: ทำซ้ำ (150px); scroll-snap-type: จำเป็น;  

ด้านล่างคุณสามารถดูว่าผลผลิตมีลักษณะอย่างไร เพิ่ม CSS snap points. สังเกตว่าเมื่อใดก็ตามที่การเลื่อนหยุดลงในขณะที่ภาพด้านล่างมองเห็นได้เพียงบางส่วนเท่านั้น ภาพเต็มจะปรากฏขึ้น หลังจาก scrollport ถ่ายโอนเข้าสู่จุดหักเหด้านบน.