CSS overscroll-behavior-inline คุณสมบัติ
- หน้าก่อน overscroll-behavior-block
- หน้าต่อไป overscroll-behavior-x
การระบุและการใช้งาน
overscroll-behavior-inline คุณภาพใช้เพื่อปิดลิ้งขององค์ประกอบหรือการตอบสนอง overscroll ขององค์ประกอบเมื่อทดลองเลื่อนนอกชายของพื้นที่ที่สามารถเลื่อน
注意：เพื่อที่จะกระตุ้น overscroll-behavior ในทิศทางแนวเส้นทางของแถว คุณอาจจะต้องใช้การย้ายเมืองที่เป็นรูปทรงที่เกิดขึ้นบนแผ่นสัมผัสหรือหน้าจอสัมผัส
ลิงค์ทางแนวยนอนเป็นการที่การเลื่อนย้อนเกินพื้นที่ที่สนับสนุนในองค์ประกอบจะนำไปสู่การกระทำเลื่อนย้อนขององค์ประกอบพ่อ. นี่เป็นพฤติกรรมเริ่มต้น
การตอบสนองกลับหลังการเลื่อนย้อนเกินพื้นที่ที่สนับสนุนเป็นการตอบสนองที่มีให้ผู้ใช้เมื่อพยายามเลื่อนย้อนเกินพื้นที่ที่สนับสนุน ตัวอย่างเช่น บนอุปกรณ์สื่อสารมือถือ ในขณะที่พยายามเลื่อนย้อนเกินพื้นที่ที่สนับสนุนของหน้าเว็บ มักจะมีการปรับปรุงภาพทางทางฟังก์ชันที่เห็นได้
CSS overscroll-behavior-inline และ overscroll-behavior-block คุณสมบัติเกี่ยวข้องกับ overscroll-behavior-x และ overscroll-behavior-y คุณสมบัติ overscroll-behavior-inline และ overscroll-behavior-block คุณสมบัตินี้ขึ้นอยู่กับทิศทางแนวตั้งและทิศทางในแนวยนอน
注意：คุณสมบัติ CSS ที่เกี่ยวข้อง writing-mode นิยามทิศทางในแนวยนอน. นี่จะมีผลต่อทิศทางในแนวยนอนคือทิศทาง x หรือ y และ overscroll-behavior-inline ผลของคุณสมบัติ. สำหรับเวอร์ชันภาษาอังกฤษ ทิศทางในแนวยนอนคือจากซ้ายไปขวา และทิศทางในแนวตั้งคือลง
ตัวอย่าง
ตัวอย่าง 1
ปิดลิงค์ทางแนวยนอนขององค์ประกอบ <div> ที่สามารถเลื่อนย้อนได้
#yellowDiv {
overscroll-behavior-inline: contain;
}
ตัวอย่าง 2: ร่วมกับคุณสมบัติ writing-mode
จะเปลี่ยนตัว <div> ฟอร์มเมตแนวตรงของ writing-mode เมื่อค่าของ overscroll-behavior-inline ถูกตั้งเป็น 'vertical-rl' แล้ว ทิศทางในแนวยนอนจะกลายเป็นทิศทาง y ดังนั้น overscroll-behavior-inline ตอนนี้ทำงานตามทิศทาง y ไม่ใช่ทิศทาง x:
#yellowDiv {
writing-mode: vertical-rl;
overscroll-behavior-inline: contain;
}
การเขียนบทความ CSS
overscroll-behavior-inline: auto|contain|none|initial|inherit;
ค่าของคุณสมบัติ
| ค่า | การอธิบาย |
|---|---|
| auto | อนุญาตให้มีการกระทำเลื่อนย้อนทางแนวโน้มและการตอบสนองกลับหลังการเลื่อนย้อนเกินพื้นที่ที่สนับสนุน ค่าเริ่มต้น |
| contain | อนุญาตให้มีการตอบสนองกลับหลังการเลื่อนย้อนเกินพื้นที่ที่สนับสนุน แต่ไม่อนุญาตให้มีการกระทำเลื่อนย้อนทางแนวโน้ม |
| none | ไม่อนุญาตให้มีการตอบสนองกลับหลังการเลื่อนย้อนเกินพื้นที่ที่สนับสนุนหรือการกระทำเลื่อนย้อนทางแนวโน้ม |
| initial | ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น. อ่านเพิ่มเติมที่: initial. |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบต้นของตัว. อ่านเพิ่มเติมที่: inherit. |
รายละเอียดเทคโนโลยี
| ค่าเริ่มต้น: | auto |
|---|---|
| การสืบทอด: | ไม่ |
| การสร้างอนุรักษ์: | ไม่สนับสนุน。อ่านเพิ่มเติมที่:คุณสมบัติที่เกี่ยวข้องกับอนุรักษ์ทางกราฟิก. |
| เวอร์ชัน: | CSS3 |
| การเขียนบทความ JavaScript: | object.style.overscrollBehaviorInline="none" |
การสนับสนุนเบราเซอร์
ตัวเลขในตารางนี้แสดงความสามารถในการสนับสนุนโบราณะเวอร์ชันแรกที่สนับสนุนคุณสมบัตินี้
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 63.0 | 18.0 | 59.0 | 16.0 | 50.0 |
เพจที่เกี่ยวข้อง
อ้างอิง：CSS overscroll-behavior คุณสมบัติ
อ้างอิง：CSS overscroll-behavior-block คุณสมบัติ
อ้างอิง：CSS overscroll-behavior-x คุณสมบัติ
อ้างอิง：CSS overscroll-behavior-y คุณสมบัติ
อ้างอิง：CSS scroll-behavior คุณสมบัติ
อ้างอิง：CSS scroll-margin คุณสมบัติ
อ้างอิง：CSS scroll-padding คุณสมบัติ
อ้างอิง：CSS scroll-snap-align คุณสมบัติ
อ้างอิง：คุณสมบัติ writing-mode ของ CSS
- หน้าก่อน overscroll-behavior-block
- หน้าต่อไป overscroll-behavior-x
