CSS scroll-snap-align ความสมดุลของการย่อยภาพ

定义和用法

scroll-snap-align 属性指定了当您停止滚动时，元素将吸附到焦点的位置。

要实现滚动吸附行为，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type คุณสมบัติ

ตัวอย่าง

ตัวอย่างที่ 1

ทำให้องค์ประกอบใกล้ที่สุดติดตั้งในตำแหน่งกลางเมื่อผู้ใช้หยุดเลื่อน

div {
  scroll-snap-align: center;
}

ทดลองด้วยตัวเอง

ตัวอย่างที่ 2: ห้องเก็บภาพถ่าย

scroll-snap-align คุณสมบัตินี้มีประสิทธิภาพมากที่จะใช้ในการแสดงห้องเก็บภาพถ่ายที่สามารถเลื่อนเลื่อนได้。ที่นี่ ทิศทางการเลื่อนคือแนวนอน และวิธีการติดตั้งทางอนุรักษ์คือติดตั้งในกลาง。เมื่อผู้ใช้ปล่อยลิขธรรมเลื่อน ภาพที่ใกล้ที่สุดจะติดตั้งในกลางของพื้นที่ที่สามารถเลื่อนเลื่อนได้ ลองคลิกภาพหนึ่ง แล้วใช้ปุ่มไปข้างหลังและไปข้างหน้าเพื่อเลื่อนดูภาพเหล่านั้น:

#container > img {
  scroll-snap-align: none center;
}
กรุงปักกิ่ง เที่ยวละลาย หวหั่น วงแหวนชายต้นรัก ฮังโจว

ทดลองด้วยตัวเอง

alley bridge in jungle mountains man with camera Cinque Terre

ตัวอย่างที่ 3: การติดตั้งทางอนุรักษ์ตามแนวบล็อคที่ตั้งตรง

เมื่อเลื่อนขึ้นลงscroll-snap-align คุณสมบัตินี้ก็สามารถตั้งค่าในทิศทางบล็อคเป็นจุดเริ่มต้นขององค์ประกอบ

#container > div {
  scroll-snap-align: start none;
}

ทดลองด้วยตัวเอง

การเขียนภาษา CSS

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

ค่าของคุณสมบัติ

ค่า คำอธิบาย
none ไม่มีประสิทธิภาพของการติดตั้งทางอนุรักษ์ของการเลื่อนเลื่อง ค่าเริ่มต้น
start ในตัวเลขแบบ x และ y ที่จุดเริ่มต้นขององค์ประกอบ
end ในตัวเลขแบบ x และ y ที่จุดสิ้นสุดขององค์ประกอบ
center ในตัวเลขแบบ x และ y ที่ศูนย์กลางขององค์ประกอบ
block inline การใช้งานภาษาสั้นทั้งสองค่า。ค่าแรกกำหนดวิกฤติที่ติดตั้งในทิศทางบล็อค ค่าที่สองกำหนดวิกฤติที่ติดตั้งในทิศทางแนวตรง
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น。อ่านต่อไปที่： initial。
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของมัน。อ่านต่อไปที่： inherit。

รายละเอียดเทคนิค

ค่าเริ่มต้น none
การสืบทอด ไม่
การสร้างอนุรักษ์： ไม่รองรับ。อ่านต่อไปที่：คุณสมบัติที่เกี่ยวข้องกับอนุรักษ์ทางอนุรักษ์。
รุ่น： CSS3
การเขียนโค้ด JavaScript： object.style.scrollSnapAlign="start"

การรองรับของเบราเซอร์

ตัวเลขในตารางนี้แสดงว่ารุ่นที่รองรับคุณสมบัตินี้อย่างเต็มที่ของเบราเซอร์

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

หน้าที่เกี่ยวข้อง

อ้างอิง：CSS scroll-snap-type ประเภทการย่อยภาพ