CSS scroll-snap-stop 属性

คำอธิบายและวิธีใช้

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

เพื่อควบคุมการหยุดการดึงละติ คุณจะต้องตั้งค่าคุณสมบัตินี้ในองค์ประกอบลูก scroll-snap-stop และ scroll-snap-align คุณสมบัตินี้ และตั้งค่าในองค์ประกอบพ่อ scroll-snap-type คุณสมบัติ

สัญญาณ: คุณจะต้องใช้การเคลื่อนไหวทางลาดบนอุปกรณ์ที่มีตะเคียงหรือหน้าจอสัมผัส เพื่อประสบการณ์ scroll-snap-stop ผลของคุณสมบัติ

ตัวอย่าง

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

div {
  scroll-snap-stop: always;
}

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

CSS กรรมศาสตร์

scroll-snap-stop: normal|always|initial|inherit;

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

ค่า คำอธิบาย
normal ค่าเริ่มต้น。หลังจากเคลื่อนไหวเร็วบนตะเคียงหรือหน้าจอสัมผัส การเลื่อนที่อยู่ในละติจะลดระยะเวลาเร็วและข้ามหลายองค์ประกอบ
always หลังจากเคลื่อนไหวเร็วบนตะเคียงหรือหน้าจอสัมผัส การเลื่อนที่อยู่ในละติจะหยุดและจะดึงองค์ประกอบต่อไปมาที่จุดสนใจ
initial ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้นของมัน。ดู: initial。
inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพ่อของมัน。ดู: inherit。

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

ค่าเริ่มต้น: normal
การสืบทอด: ไม่
การสร้างอนุรักษ์: ไม่สนับสนุน。ดู:คุณสมบัติที่เกี่ยวกับอนุรักษ์ทางอนิมาชั่น。
เวอร์ชั่น: CSS3
JavaScript กรรมศาสตร์: object.style.scrollSnapStop="always"

การสนับสนุนของเบราเซอร์

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

เชโรม์ เอดจ์ ฟากซ์ เซฟาฟาย ออเปร่า
75.0 79.0 103.0 15.0 62.0

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

อ้างอิง:CSS scroll-snap-align 属性

อ้างอิง:CSS scroll-snap-type 属性