CSS overscroll-behavior รายละเอียด
- หน้าก่อน overflow-y
- หน้าต่อไป overscroll-behavior-block
การกำหนดและการใช้งาน
overscroll-behavior
ตัวแปรที่ใช้ในการปิดลิงค์ลากเลื่อน (scroll chaining) หรือความตอบสนองลากเลื่อนเกิน (overscroll affordance) ขององค์ประกอบเมื่อพยายามลากเลื่อนเกินขอบเขตลากเลื่อน
ลิงค์ลากเลื่อน:เมื่อลากเลื่อนเกินขององค์ประกอบหนึ่ง จะนำไปสู่การลากเลื่อนขององค์ประกอบพ่อ นี่เป็นการกระทำที่เป็นปริยาย
ความตอบสนองการเลื่อนหน้าเกินขอบเขตลากเลื่อน:ความตอบสนองที่มอบให้แก่ผู้ใช้เมื่อพยายามลากเลื่อนเกินขอบเขตลากเลื่อนขององค์ประกอบ ตัวอย่าง เมื่อพยายามลากเลื่อนเกินหัวเว็บไซต์บนอุปกรณ์แพลตฟอร์มที่เคลื่อนที่ จะมีการแสดงความตอบสนองทาง視覚และปลดปล่อยหน้าเว็บ
overscroll-behavior
คุณสมบัตินี้เป็นรูปแบบย่อของคุณสมบัติตัวอื่น
overscroll-behavior
ค่าของคุณสมบัติสามารถตั้งค่าด้วยวิธีต่าง ๆ:
หากคุณสมบัติ overscroll-behavior มีค่าสองค่า:
overscroll-behavior: none contain;
- ทิศ x: ไม่มีการทำงานเมื่อเกิดการเลื่อนลอยเกินเหตุผล
- ทิศ y: ไม่มีลิงค์เลื่อน แต่อนุญาตให้มีการตอบสนองเมื่อเกิดการเลื่อนลอยเกินเหตุผล
หากคุณสมบัติ overscroll-behavior มีค่าเพียงหนึ่งค่า:
overscroll-behavior: contain;
- ทิศ x และ y: ไม่มีลิงค์เลื่อน แต่อนุญาตให้มีการตอบสนองเมื่อเกิดการเลื่อนลอยเกินเหตุผล
ตัวอย่าง
ตัวอย่าง 1
ปิดลิงค์เลื่อนของตัว <div> ที่สามารถเลื่อนได้:
#yellowDiv { overscroll-behavior: contain; }
ตัวอย่าง 2: ระบบการใช้งานคู่
ตั้งค่า overscroll-behavior
ค่าทราบความของอัตราแบบ auto none
รวมถึงอนุญาตให้มีลิงค์เลื่อนและการตอบสนองเมื่อเกิดการเลื่อนลอยเกินเหตุผลในทิศ x แต่ไม่อนุญาตให้มีในทิศ y:
#pinkDiv { overscroll-behavior: auto none; }
ระบบเขียน CSS
overscroll-behavior: auto|contain|none|initial|inherit;
ค่าทราบความ
ค่า | คำอธิบาย |
---|---|
auto | อนุญาตให้มีลิงค์เลื่อนและการตอบสนองเมื่อเกิดการเลื่อนลอยเกินเหตุผล ค่าเริ่มต้น |
contain | อนุญาตให้มีการตอบสนองเมื่อเกิดการเลื่อนลอยเกินเหตุผล แต่ไม่อนุญาตให้มีลิงค์เลื่อน |
none | ไม่อนุญาตให้มีการตอบสนองเมื่อเกิดการเลื่อนลอยเกินเหตุผลหรือการทำงานของลิงค์เลื่อน |
initial | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น ดูข้อมูลเพิ่มเติมที่: initial. |
inherit | มีคุณสมบัตินี้จากการที่มีอยู่ในตัวปลายตามที่มาของตัวเอง ดูข้อมูลเพิ่มเติมที่: inherit. |
รายละเอียดเทคนิค
ค่าเริ่มต้น: | auto |
---|---|
เชิงมาตรฐาน: | ไม่ |
การสร้างแอนิเมชัน: | ไม่สนับสนุน。ดูข้อมูลเพิ่มเติมที่:คุณสมบัติที่เกี่ยวกับแอนิเมชัน. |
รุ่น: | CSS3 |
ระบบเขียนภาษา JavaScript: | object.style.overscrollBehavior="none" |
การสนับสนุนเบราเซอร์
ตัวเลขในตารางนี้แสดงรุ่นที่สนับสนุนคุณสมบัติดังกล่าวครบถ้วนของเบราเซอร์
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
63.0 | 18.0 * | 59.0 | 16.0 | 50.0 |
* ใน Microsoft Edge ค่าทราบความเป็น 'none' ถูกปฎิบัติเป็น 'contain' นี่ไม่ถูกต้อง
หน้าที่เกี่ยวข้อง
อ้างอิง:CSS overscroll-behavior-x รายละเอียด
อ้างอิง:CSS overscroll-behavior-y รายละเอียด
อ้างอิง:CSS scroll-behavior รายละเอียด
อ้างอิง:CSS scroll-margin รายละเอียด
- หน้าก่อน overflow-y
- หน้าต่อไป overscroll-behavior-block