CSS overscroll-behavior รายละเอียด

การกำหนดและการใช้งาน

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 รายละเอียด

อ้างอิง:CSS scroll-padding ทางนักวิเคราะห์

อ้างอิง:CSS scroll-snap-align ทางนักวิเคราะห์