overscroll-behavior เป็นคุณสมบัติใน CSS ที่ควบคุมพฤติกรรมขององค์ประกอบเมื่อเกิดการเลื่อนและช่วงการเลื่อนเกินขอบเขต แอตทริบิวต์นี้มีประโยชน์อย่างยิ่งสำหรับการปรับปรุงประสบการณ์ผู้ใช้ โดยเฉพาะบนอุปกรณ์เคลื่อนที่ สามารถใช้แอตทริบิวต์นี้เพื่อหลีกเลี่ยงเอฟเฟกต์ "เด้ง" เริ่มต้น หรือปรับแต่งเอฟเฟกต์นี้เมื่อผู้ใช้พยายามเลื่อนองค์ประกอบที่ถึงขีดจำกัดการเลื่อน
พฤติกรรมการเลื่อนเกิน: อัตโนมัติ | . ไม่มี; /* หรือตั้งค่าแยกกันสำหรับแกน X และแกน Y*/ overscroll-behavior-x: อัตโนมัติ | . ไม่มี; overscroll-behavior-y: อัตโนมัติ | . ไม่มี;
auto : ค่าเริ่มต้น องค์ประกอบใช้ลักษณะการเลื่อนเริ่มต้น ในเบราว์เซอร์ส่วนใหญ่ ซึ่งหมายความว่าการเลื่อนจะมีผล "เด้ง" (เช่น เนื้อหาจะเด้งกลับเล็กน้อยหลังจากถึงขอบเขต) เมื่อเกินช่วงการเลื่อน contain : ป้องกันการแพร่กระจายของลูกโซ่เลื่อน หากการเลื่อนเกิดขึ้นในองค์ประกอบที่ระบุและเนื้อหาขององค์ประกอบเลื่อนออกนอกขอบเขต เหตุการณ์การเลื่อนจะไม่ถูกเผยแพร่ไปยังองค์ประกอบหลักขององค์ประกอบ ซึ่งจะช่วยสร้างพื้นที่การเลื่อนที่เป็นอิสระและหลีกเลี่ยงข้อขัดแย้งในการเลื่อนที่ไม่จำเป็น none : ป้องกันพฤติกรรมเริ่มต้นใดๆ เมื่อเลื่อน รวมถึงเอฟเฟกต์ "เด้ง" ซึ่งหมายความว่าเมื่อผู้ใช้พยายามเลื่อนองค์ประกอบที่ถึงขอบเขตแล้ว พวกเขาจะไม่เห็นเอฟเฟกต์หรือภาพเคลื่อนไหวในการเลื่อนใดๆสมมติว่าคุณมีหน้าเว็บที่มีพื้นที่ภายในที่สามารถเลื่อนได้ (เช่น รายการหรือแกลเลอรีรูปภาพ) หากคุณต้องการให้พื้นที่ด้านในนี้หยุดเมื่อเลื่อนไปที่ขอบโดยไม่สร้างเอฟเฟกต์ "เด้ง" ตามค่าเริ่มต้น คุณสามารถตั้งค่าได้ดังนี้:
.พื้นที่เลื่อนได้ {
พฤติกรรมการเลื่อนเกิน: ไม่มี;
ความสูง: 200px;
overflow-y: auto; /* อนุญาตให้เลื่อนแกน Y*/
- ในตัวอย่างนี้ คลาส .scrollable-area ใช้กับองค์ประกอบที่คุณต้องการควบคุมพฤติกรรมการเลื่อน ตั้งค่า overscroll-behavior: none; เพื่อให้เมื่อเลื่อนไปที่ด้านบนหรือด้านล่างขององค์ประกอบ จะไม่มีการเลื่อนหรือภาพเคลื่อนไหวเพิ่มเติม
สิ่งที่ควรทราบ
เบราว์เซอร์บางประเภทไม่รองรับแอตทริบิวต์overscroll-behavior ดังนั้นจึงแนะนำให้ทำการทดสอบอย่างเพียงพอเมื่ออาศัยฟังก์ชันการทำงานของคุณสมบัตินี้ เบราว์เซอร์บางตัวอาจรองรับคุณสมบัติ overscroll-behavior-x และ overscroll-behavior-y ทำให้คุณสามารถควบคุมพฤติกรรมการเลื่อนแนวนอนและแนวตั้งได้ตามลำดับ อย่างไรก็ตาม การสนับสนุนนี้มีจำกัดเช่นกัน ดังนั้นจึงจำเป็นต้องมีการทดสอบเช่นกัน ใช้แอ็ตทริบิวต์นี้ด้วยความระมัดระวังเมื่อออกแบบอินเทอร์เฟซผู้ใช้โดยคำนึงถึงความสามารถในการเข้าถึงและประสบการณ์ผู้ใช้ ในบางกรณี ลักษณะการเลื่อนเริ่มต้น (เช่น เอฟเฟกต์ "เด้ง") อาจใช้งานง่ายและเข้าใจง่ายสำหรับผู้ใช้นี่เป็นการสรุปบทความเกี่ยวกับแอตทริบิวต์ overscroll-behavior ใน CSS สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแอตทริบิวต์ overscroll-behavior โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรืออ่านบทความที่เกี่ยวข้องด้านล่างต่อไป ฉันหวังว่าคุณจะสนับสนุนฉันในอนาคต . downcodes.com!