CSS overscroll-behavior-x ทางใช้

การระบุและการใช้งาน

overscroll-behavior-x คุณสมบัตินี้ใช้เพื่อปิดโซ่การเลื่อนหรือการตอบสนองทางฝั่งข้างเคียงของการเลื่อนล้ำชายในทิศ x

แนะนำ:เพื่อที่จะกระตุ้น overscroll-behavior ในทิศ x อาจจะต้องใช้กราวาทหรือกราวาททางมือหลังหรือหน้าจอสัมผัส

โซ่การเลื่อนหมายถึงการเลื่อนล้ำชายบนองค์ประกอบจะนำไปสู่การเลื่อนขององค์ประกอบพ่อ ซึ่งเป็นพฤติกรรมเริ่มต้น

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

ตัวอย่าง

ปิดโซ่การเลื่อนของประกาศ <div> ในทิศ x:

#yellowDiv {
  overscroll-behavior-x: contain;
}

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

ระบบเลือกของ CSS

overscroll-behavior-x: auto|contain|none|initial|inherit;

ค่าทรัพยากร

ค่า รายละเอียด
auto อนุญาตให้มีการเลื่อนโซ่และการตอบสนองทางฝั่งข้างเคียงของการเลื่อนเล็กน้อย ค่าเริ่มต้น
contain อนุญาตให้มีการตอบสนองทางฝั่งข้างเคียงของการเลื่อนเล็กน้อย แต่ไม่อนุญาตให้มีการเลื่อนโซ่
none ไม่อนุญาตให้มีการตอบสนองทางฝั่งข้างเคียงของการเลื่อนเล็กน้อยหรือการเลื่อนโซ่
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น โปรดติดตาม: initial.
inherit มีความหมายในการสืบทอดคุณสมบัตินี้จากตัวปลอดภัยของพ่อของมัน โปรดติดตาม: inherit.

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

ค่าเริ่มต้น: auto
การเชื่อมโยง: ไม่
การสร้างอนุทยาน: ไม่สนับสนุน โปรดติดตาม:คุณสมบัติที่เกี่ยวข้องกับอนุทยาน.
เวอร์ชัน: CSS3
ระบบเลือกของ JavaScript: object.style.overscrollBehaviorX="none"

การสนับสนุนโปรแกรมนีเวอร์

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

Chrome Edge Firefox Safari Opera
63.0 18.0 * 59.0 16.0 50.0

* ใน Microsoft Edge ค่าทรัพยากร none จะถูกจับตามองเป็น contain ซึ่งไม่ถูกต้อง

เพจที่เกี่ยวข้อง

อ้างอิง：CSS overscroll-behavior ทางใช้

อ้างอิง：CSS overscroll-behavior-block ทางใช้

อ้างอิง：CSS overscroll-behavior-inline ทางใช้

อ้างอิง：CSS overscroll-behavior-y ทางใช้

อ้างอิง：CSS scroll-behavior ทางใช้

อ้างอิง：CSS scroll-margin ทางใช้

อ้างอิง：CSS scroll-padding รายการ

อ้างอิง：CSS scroll-snap-align รายการ