รายการเพิ่มเติม

พอดแคสต์ CSS - 034: Overflow

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

มีตัวเลือกการตัด 2 แบบใน CSS โดย text-overflow จะช่วยสำหรับข้อความแต่ละบรรทัด และพร็อพเพอร์ตี้ overflow จะช่วยควบคุมส่วนเกินในโมเดลของกล่อง

บรรทัดเดียวที่มี text-overflow เกิน

ใช้พร็อพเพอร์ตี้ text-overflow ในองค์ประกอบที่มีโหนดข้อความ เช่น ย่อหน้า <p> ซึ่งระบุลักษณะที่ข้อความปรากฏเมื่อไม่พอดีกับพื้นที่ที่มีอยู่ขององค์ประกอบ ข้อความ HTML ที่สามารถดูได้ทั้งหมดในหน้าเว็บจะอยู่ในโหนดข้อความ หากต้องการใช้ text-overflow คุณต้องมีบรรทัดข้อความที่ไม่ได้ตัดบรรทัดเดียว ดังนั้นคุณจะต้องตั้งค่า overflow เป็น hidden และมีค่า white-space ที่ป้องกันไม่ให้มีการตัดข้อความ

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

การใช้พร็อพเพอร์ตี้เพิ่มเติม

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

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

การเลื่อนบนแกนแนวตั้งและแนวนอน

พร็อพเพอร์ตี้ overflow-y ควบคุมส่วนเกินทางกายภาพตามแกนแนวตั้งของวิวพอร์ตของอุปกรณ์ ดังนั้นจึงต้องเลื่อนขึ้นและลง

คุณสมบัติ overflow-x จะควบคุมส่วนเกินตามแกนแนวนอนของวิวพอร์ตของอุปกรณ์ ดังนั้นจึงต้องเลื่อนไปทางซ้ายและขวา

คุณสมบัติทางตรรกะของทิศทางการเลื่อน

พร็อพเพอร์ตี้ overflow-inline และ overflow-block จะตั้งค่ารายการเพิ่มเติมตามทิศทางของเอกสารและโหมดการเขียน

ชวเลข overflow

ชวเลข overflow กำหนดทั้งรูปแบบ overflow-x และ overflow-y ในบรรทัดเดียว:

overflow: hidden scroll;

หากระบุคีย์เวิร์ด 2 คำ คำแรกจะใช้กับ overflow-x และคำแรกสำหรับ overflow-y มิฉะนั้น ทั้ง overflow-x และ overflow-y จะใช้ค่าเดียวกัน

ค่า

มาดูรายละเอียดค่าและคีย์เวิร์ดที่ใช้ได้กับพร็อพเพอร์ตี้ overflow กัน

overflow: visible (ค่าเริ่มต้น)

หากไม่ได้ตั้งค่าพร็อพเพอร์ตี้ overflow: visible จะเป็นค่าเริ่มต้นของเว็บ วิธีนี้ช่วยให้มั่นใจได้ว่าเนื้อหาจะไม่ถูกซ่อนโดยไม่ได้ตั้งใจ และเป็นไปตามหลักการสำคัญของ "ไม่ซ่อนเนื้อหา" หรือ "เลย์เอาต์ที่ปลอดภัยของเลย์เอาต์ที่แม่นยำ"

overflow: hidden

เมื่อเนื้อหาของ overflow: hidden ถูกตัดตามทิศทางที่ระบุไว้ และไม่มีแถบเลื่อนที่จะแสดง

overflow: scroll

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

overflow: clip

เนื้อหาที่มี overflow: clip จะถูกตัดออกจากช่องระยะห่างจากขอบขององค์ประกอบ เช่นเดียวกับ overflow: hidden ความแตกต่างระหว่าง clip และ hidden คือคีย์เวิร์ด clip ห้ามไม่ให้มีการเลื่อนทั้งหมด รวมถึงการเลื่อนแบบเป็นโปรแกรม

overflow: auto

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

การเลื่อนและส่วนเพิ่มเติม

ลักษณะการทำงานของ overflow หลายอย่างเหล่านี้ทำให้เกิดแถบเลื่อน แต่มีลักษณะการทำงานและคุณสมบัติในการเลื่อนเฉพาะบางอย่างที่ช่วยให้คุณควบคุมการเลื่อนในคอนเทนเนอร์รายการเพิ่มเติมได้

การเลื่อนและการช่วยเหลือพิเศษ

สิ่งสำคัญคือต้องตรวจสอบว่าพื้นที่ที่เลื่อนได้ยอมรับโฟกัสได้ เพื่อให้ผู้ใช้แป้นพิมพ์สามารถกด Tab ไปยังช่องแล้วใช้ปุ่มลูกศรในการเลื่อนได้

หากต้องการให้กล่องเลื่อนยอมรับโฟกัส ให้เพิ่ม tabindex="0" ซึ่งเป็นชื่อที่มีแอตทริบิวต์ aria-labelledby และแอตทริบิวต์ role ที่เหมาะสม เช่น

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

จากนั้นจะใช้ CSS เพื่อระบุว่าช่องมีโฟกัสได้ โดยใช้พร็อพเพอร์ตี้ outline เพื่อบ่งชี้ว่าช่องจะเลื่อนได้แล้ว

Adrian Roselli สาธิตว่า CSS สามารถช่วยป้องกันการถดถอยสำหรับการช่วยเหลือพิเศษ ในส่วนการใช้ CSS เพื่อบังคับใช้การช่วยเหลือพิเศษ เช่น หากต้องการเปิดการเลื่อนและเพิ่มตัวบ่งชี้โฟกัสก็ต่อเมื่อมีการใช้แอตทริบิวต์ที่ถูกต้องเท่านั้น กฎต่อไปนี้จะทำให้ช่องเลื่อนได้ต่อเมื่อมีแอตทริบิวต์ tabindex, aria-labelledby และ role

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

การวางตำแหน่งแถบเลื่อนภายในโมเดลกล่อง

แถบเลื่อนจะใช้พื้นที่ภายในช่องระยะห่างจากขอบและสามารถแย่งชิงพื้นที่ได้ในกรณีที่inline ไม่ใช่overlaid โมดูลโมเดล Box จะขยายเพิ่มเติมเกี่ยวกับแหล่งที่มาของการเปลี่ยนเลย์เอาต์ที่เป็นไปได้นี้

ตัวเลื่อนรูทกับการเลื่อนโดยปริยาย

คุณอาจสังเกตเห็นว่าแถบเลื่อนบางรุ่นมีลักษณะการทำงานแบบดึงเพื่อรีเฟรชและลักษณะการทำงานพิเศษอื่นๆ โดยเฉพาะอย่างยิ่งเมื่อพัฒนาสำหรับแอปพลิเคชันบนอุปกรณ์เคลื่อนที่และแบบผสม ลักษณะการเลื่อนนี้จะเกิดขึ้นในแถบเลื่อนรูท หน้าเว็บจะมีแถบเลื่อนรูทได้เพียง 1 รายการเท่านั้น โดยค่าเริ่มต้น documentElement เป็นแถบเลื่อนรูทของหน้า แต่เมื่อเปลี่ยนเอลิเมนต์ที่เป็นแถบเลื่อนรูท ลักษณะการทำงานพิเศษจะใช้กับตัวเลื่อนอื่นๆ ที่ไม่ใช่ documentElement ได้ เราเรียกแถบเลื่อนแบบใหม่นี้ว่าตัวเลื่อนรูทแบบโดยนัย

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

ลักษณะการเลื่อน

scroll-behavior อนุญาตให้คุณเลือกใช้การเลื่อนไปยังองค์ประกอบต่างๆ ที่ควบคุมโดยเบราว์เซอร์ ซึ่งจะช่วยให้คุณระบุวิธีจัดการการนำทางในหน้าเว็บ เช่น .scrollTo() หรือลิงก์ได้

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

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

พฤติกรรมการเลื่อนเกิน

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

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับรายการเพิ่มเติม

แหล่งข้อมูล

ข้อมูลส่วนเกินและการสูญเสียข้อมูลใน CSS จาก Smashing Magazine