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

The CSS Podcast - 034: Overflow

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

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

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

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

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

การใช้พร็อพเพอร์ตี้การเลื่อนออก

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

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

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

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

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

พร็อพเพอร์ตี้เชิงตรรกะสำหรับทิศทางการเลื่อน

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

ชวเลข overflow

ตัวย่อ overflow จะตั้งค่าทั้งสไตล์ overflow-x และ overflow-y ในบรรทัดเดียว

overflow: hidden scroll;

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

ค่า

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

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

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

overflow: hidden

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

overflow: scroll

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

overflow: clip

เช่นเดียวกับ overflow: hidden เนื้อหาที่มี overflow: clip จะได้รับการครอบตัดให้พอดีกับกล่องระยะห่างจากขอบขององค์ประกอบ ความแตกต่างระหว่าง 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 เพื่อให้เป็นสิ่งบอกใบ้ที่มองเห็นได้ว่าจะเลื่อนช่องได้แล้ว

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

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

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

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

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

root-scroller กับ implicit-scroller

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

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

scroll-behavior

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

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

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

overscroll-behavior

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

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

ทดสอบความรู้เรื่องการล้น

แหล่งข้อมูล

Overflow และ Data Loss ใน CSS จาก Smashing Magazine