คำแนะนำเกี่ยวกับ CSS Scroll Snap Points
CSS Scroll Snap Module เป็นมาตรฐานเว็บที่ให้การควบคุมแก่เรา เลื่อนบนหน้าเว็บ เพื่อให้เราสามารถทำให้ผู้ใช้เลื่อนไปที่บางส่วนของหน้าแทนที่จะไปที่ใดก็ได้บนหน้านั้น.
เลื่อน เป็นการกระทำที่มีประสิทธิภาพมากที่สุดในเว็บไซต์ เบราว์เซอร์ในช่วงหลายปีที่ผ่านมามี ปรับปรุงประสิทธิภาพการเลื่อน เพื่อจับคู่ความแข็งแรงของนิ้วมือของผู้ใช้ และนักพัฒนามี ใช้การเลื่อนอย่างสร้างสรรค์ เพื่อให้ได้ประสบการณ์การใช้งานที่ดีขึ้นหรือไม่อยู่ในกล่อง.
อย่างไรก็ตามเมื่อมันมาถึงความสัมพันธ์ระหว่าง การเข้ารหัสและการเลื่อน, ดูเหมือนว่า JavaScript เท่านั้นที่สามารถควบคุมปริมาณได้ในภายหลัง นี่เป็นเช่นนั้นมาเป็นเวลานาน แต่ด้วยการ การแนะนำของจุดเลื่อนสแน็ป, CSS เริ่มทัน.
เลื่อนโดยไม่ต้องเลื่อนจุดสแน็ป
โดยทั่วไปเราจะไม่เลื่อนช้ามากโดยเฉพาะในโทรศัพท์ ยิ่งคุณเลื่อนเร็วเท่าไหร่ก็จะยิ่งควบคุมน้อยลงเท่านั้น คุณจะอยู่ที่ไหนบนหน้าจอ เมื่อคุณหยุดเลื่อน.
ลองนึกภาพคุณกำลังเลื่อนดูภาพผลิตภัณฑ์มากมายบนเว็บไซต์หรือแกลเลอรี่ภาพถ่ายหรือสไลด์ออนไลน์ สิ่งที่คุณต้องการในแอปพลิเคชันดังกล่าวคือ ดูผลิตภัณฑ์รูปภาพหรือสไลด์ทั้งหมด ทุกครั้งที่คุณเลื่อน ไม่เพียง ส่วนหนึ่ง ของรูปภาพผลิตภัณฑ์รูปถ่ายหรือภาพนิ่ง.
ตัวอย่างเช่นในการสาธิตด้านล่างคุณสามารถเห็นทุกครั้งที่ผู้ใช้หยุดเลื่อนเท่านั้น มองเห็นประมาณครึ่งหนึ่งของภาพ ที่ด้านล่างของหน้าจอ อย่างไรก็ตามผู้ใช้ส่วนใหญ่ต้องการเห็นภาพสุดท้ายอย่างเต็มที่.
เลื่อนด้วยจุดสแน็ปเลื่อน
นี่คือสิ่งที่เรานำมา CSS เลื่อนจุด snap. ชื่อนี้อธิบายตนเอง มันเป็นมาตรฐาน CSS ที่ช่วยให้เรา จัดรายการให้เข้าที่ เมื่อเลื่อน.
มี ห้าคุณสมบัติ CSS ที่ประกอบด้วยมาตรฐานนี้:
เลื่อนสแน็ปอินประเภท
เลื่อนสแน็ปอินจุด x
เลื่อนสแน็ปอินจุด-Y
เลื่อนสแน็ปอินประสานงาน
เลื่อนสแน็ปอินปลายทาง
รองรับเบราว์เซอร์
มีสรรพคุณ จำเป็นต้อง -WebKit
และ -นางสาว
คำนำหน้า สำหรับเบราว์เซอร์ที่เกี่ยวข้อง ขณะที่เขียนบทความนี้ CSS และ snap snap ไม่รองรับใน Chrome และ Opera.
โปรดทราบว่าคุณสมบัติสี่รายการสุดท้ายมีแนวโน้มที่จะถูกทิ้งโดยตัวแทนผู้ใช้ในอนาคตอันใกล้ แทน, คุณสมบัติใหม่, คือ เลื่อนสแน็ปอินจัด
, เลื่อนสแน็ปอินขอบ
, และ เลื่อนสแน็ปอิน padding
, อาจถูกสร้างขึ้น, ตามที่กำหนดไว้ในสเปคนี้.
อย่างไรก็ตามพวกเขาจะ มีวัตถุประสงค์ที่คล้ายกัน เป็นคุณสมบัติเดิม ปัจจุบันชุดของคุณสมบัติเดิมจะใช้ได้ดี.
คุณสมบัติ
คุณจำเป็นต้อง เพิ่ม เลื่อนสแน็ปอินประเภท
คุณสมบัติไปยังคอนเทนเนอร์เลื่อน (องค์ประกอบคอนเทนเนอร์ที่มีเด็ก ๆ ล้นในขณะที่เลื่อน) มันระบุ ความเข้มงวดของแอ็คชั่น snap. สามารถใช้ค่าสามค่า:
จำเป็น
- เมื่อการเลื่อนเสร็จสิ้นการเลื่อนจะ snap ที่จุด snap ที่เกี่ยวข้องความใกล้ชิด
- เข้มงวดน้อยกว่าจำเป็น
; มันจะ ขึ้นอยู่กับการตัดสินของ UA ไม่ว่าจะเป็นองค์ประกอบจะ snap ที่จุด snap ที่กำหนดไม่มี
- ไม่มีการจัดระยะ
เลื่อนสแน็ปอินจุด 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 ถ่ายโอนเข้าสู่จุดหักเหด้านบน.