Published: Sep 4, 2026
ฟีเจอร์ "คอนเทนเนอร์เลื่อนแกนเดียว" ขยายพร็อพเพอร์ตี้ CSS overflow เพื่อรองรับค่าที่เลื่อนได้ (auto, scroll, hidden) ที่รวมกับ clip (เช่น overflow: scroll clip) ซึ่งส่งผลให้เกิดคอนเทนเนอร์เลื่อนสำหรับแกนเดียวเท่านั้น
แม้ว่าการเปลี่ยนแปลงนี้จะปลดล็อกฟีเจอร์ที่มีผู้ใช้ขอเข้ามาเป็นจำนวนมาก เช่น การวางตำแหน่งแบบ Sticky ต่อแกน แต่ก็ยังส่งผลข้างเคียงเพิ่มเติมในฟีเจอร์อื่นๆ ที่ขึ้นอยู่กับการเลื่อน เนื่องจากความเสี่ยงที่อาจเกิดขึ้นเกี่ยวกับความเข้ากันได้ เราจึงขอให้ผู้พัฒนาทดสอบเว็บไซต์และให้ความคิดเห็นก่อนที่จะเปิดตัวฟีเจอร์นี้ในเวอร์ชันเสถียร
ฟีเจอร์นี้พร้อมให้ผู้พัฒนาทดสอบใน Chrome 153 ในเวอร์ชันเบต้า, เวอร์ชันที่กำลังพัฒนา และเวอร์ชัน Canary release channels โดยไม่จำเป็นต้องเปิดใช้แฟล็ก
ข้อบกพร่องในการตั้งค่าการล้นในแกนเดียว
หากไม่มีฟีเจอร์นี้ คุณจะไม่สามารถสร้างคอนเทนเนอร์เลื่อนแกนเดียวอย่างแท้จริงด้วย CSS ได้ หากคุณกำหนดค่าแกนหนึ่งให้เลื่อนขณะที่พยายามทำให้แกนอีกแกนหนึ่งมองเห็นได้ (เช่น ตั้งค่า overflow-x: scroll และปล่อยให้ overflow-y: visible) กลไกสไตล์ของเบราว์เซอร์จะบังคับให้แกนที่มองเห็นได้คำนวณเป็น auto (หรือ scroll) โดยอัตโนมัติ ซึ่งจะสร้างตัวเลื่อน 2 มิติแม้ว่าคุณจะไม่ได้ตั้งใจก็ตาม
ข้อบกพร่องนี้จะเห็นได้ชัดเจนมากเมื่อพยายามสร้างตารางที่มีแถวบนสุดและคอลัมน์แรกแบบ Sticky ในตัวอย่างต่อไปนี้ เป้าหมายคือให้คอลัมน์แรกติดกับ .table-wrapper ที่เลื่อนในแนวนอน และให้แถวบนสุดติดกับตัวเลื่อนของเอกสาร
<div class="table-wrapper" style="overflow-x: auto;">
<table>
…
</table>
</div>
/* Scroll horizontally */
.table-wrapper {
overflow-x: auto;
}
/* Sticky top row */
.table-wrapper thead {
position: sticky;
top: 0;
}
/* Sticky first column */
.table-wrapper td:first-child {
position: sticky;
left: 0;
}
หากคุณลองใช้ คุณจะเห็นว่าฟีเจอร์นี้ใช้ไม่ได้ เนื่องจากข้อบกพร่องของการล้นที่อธิบายไว้ก่อนหน้านี้ .table-wrapper จะกลายเป็นตัวเลื่อน 2 มิติ ดังนั้นเมื่อ position: sticky ค้นหาตัวเลื่อนบรรพบุรุษที่ใกล้ที่สุดสำหรับแต่ละแกน ผลลัพธ์คือองค์ประกอบ .table-wrapper ในทั้ง 2 กรณี
การสาธิตการใช้งานแบบสด
การบันทึกการสาธิต
คอนเทนเนอร์เลื่อนแกนเดียวช่วยแก้ไขข้อบกพร่อง
เมื่อใช้คอนเทนเนอร์เลื่อนแกนเดียว คุณจะป้องกันไม่ให้แกนรองกลายเป็นตัวเลื่อนได้อย่างชัดเจนโดยใช้ clip ด้วยวิธีนี้ position: sticky จะติดตามคอนเทนเนอร์เลื่อน 2 รายการที่แตกต่างกันได้อย่างอิสระ
หากต้องการแก้ไขตัวอย่างตาราง ให้จับคู่การเลื่อนแนวนอนกับ overflow-y: clip
.table-wrapper {
overflow-x: auto;
overflow-y: clip;
}
หรือใช้ชวเลข overflow ดังนี้
.table-wrapper {
overflow: auto clip;
}
เมื่อทำเช่นนี้ .table-wrapper จะทำหน้าที่เป็นคอนเทนเนอร์เลื่อนสำหรับแกน X เท่านั้น ตอนนี้แถวบนสุดแบบ Sticky จะข้ามคอนเทนเนอร์นี้และติดกับตัวเลื่อนของเอกสารในแกน Y อย่างถูกต้อง ขณะที่คอลัมน์แรกจะยังคงติดกับ .table-wrapper ในแนวนอน
หากคุณกำลังดูโพสต์นี้ในเบราว์เซอร์ที่รองรับ คุณจะเห็นการทำงานของฟีเจอร์นี้ในการสาธิตต่อไปนี้ :
การสาธิตการใช้งานแบบสด
การบันทึกการสาธิต
ลักษณะการทำงานที่ได้รับผลกระทบ
เนื่องจากคอนเทนเนอร์เลื่อนแกนเดียวเปลี่ยนวิธีประเมินและสร้างบริบทการเลื่อน คุณจึงอาจเห็นการเปลี่ยนแปลงในฟีเจอร์อื่นๆ ที่อาศัยคอนเทนเนอร์เลื่อน เช่น
position: sticky: ดังที่แสดงไว้ ตอนนี้องค์ประกอบจะติดอยู่ภายในคอนเทนเนอร์เลื่อนแกนเดียวอย่างถูกต้อง ซึ่งช่วยปรับปรุงลักษณะการทำงานขององค์ประกอบที่จำกัดโดยoverflow: clipในแกนหนึ่งoverscroll-behavior: เนื่องจากตอนนี้องค์ประกอบสามารถเป็นคอนเทนเนอร์เลื่อนในแกนเดียวได้overscroll-behaviorจึงอาจไม่ทริกเกอร์ในแกนที่ถูกตัดออก ซึ่งอาจส่งผลต่อเอฟเฟกต์การดึงเพื่อรีเฟรชหรือเอฟเฟกต์การเด้งที่กำหนดเอง การเปลี่ยนแปลงลักษณะการทำงานนี้ตรงกับ Firefox และ Safari- การเลื่อนแบบเป็นโปรแกรม: การเรียกใช้ API การเลื่อน (เช่น
Element.scrollTo()) ในคอนเทนเนอร์เลื่อนแกนเดียวจะบังคับใช้ข้อจำกัดการเลื่อนแบบเป็นโปรแกรม องค์ประกอบจะปฏิเสธที่จะเลื่อนแบบเป็นโปรแกรมตามแกนที่กำหนดเป็นคลิป - การปรับขนาดเซลล์ขั้นต่ำของ Grid และ Flex: สำหรับคอนเทนเนอร์เลื่อนในเลย์เอาต์ Grid และ Flex ระบบจะละเว้นขนาดขั้นต่ำเริ่มต้น (
min-width: auto) เพื่อให้เซลล์ปรับตัวเองให้เข้ากับพื้นที่ว่าง เมื่อตั้งค่าoverflow: clipในแกนเดียวกัน ขนาดขั้นต่ำเริ่มต้นจะเริ่มมีผล ซึ่งอาจทำให้คอนเทนเนอร์ Flex หรือ Grid มีขนาดใหญ่ขึ้น
การตรวจหาฟีเจอร์
หากต้องการตรวจหาการรองรับคอนเทนเนอร์เลื่อนแกนเดียว ให้ค้นหา กฎ @supports named-feature() โดยใช้คีย์เวิร์ด single-axis-scroll-container
@supports named-feature(single-axis-scroll-container) {
/* Feature is supported */
}
ดังที่กล่าวไว้ใน ปัญหา #13677 ของ CSSWG การใช้ named-feature(single-axis-scroll-container) เป็นวิธีมาตรฐานที่แนะนำในการตรวจหาความสามารถนี้ เนื่องจากตรวจสอบโดยใช้ @supports (overflow: scroll clip) เพียงอย่างเดียวเป็นการตรวจสอบการแยกวิเคราะห์เท่านั้น ซึ่งไม่ได้ตรวจหาว่าเบราว์เซอร์จัดการลักษณะการทำงานของการเลื่อนแกนเดียวที่แก้ไขแล้วอย่างถูกต้องหรือไม่
ใน JavaScript ให้ใช้ CSS.supports("named-feature(single-axis-scroll-container)") เพื่อทำการตรวจสอบนี้
ต้องการความคิดเห็น
เราได้ทำการทดสอบในเว็บไซต์ 190 เว็บไซต์ เพื่อประเมินความเสี่ยงที่อาจเกิดขึ้นเกี่ยวกับความเข้ากันได้ จากการวิเคราะห์นี้ การเปลี่ยนแปลงดังกล่าวดูเหมือนจะไม่ทำให้เกิดการหยุดทำงานที่สำคัญ
อย่างไรก็ตาม เนื่องจากคอนเทนเนอร์เลื่อนแกนเดียวเปลี่ยนวิธีประเมินบริบทการเลื่อนโดยพื้นฐาน เราจึงต้องพิจารณาในวงกว้าง เราขอให้คุณทดสอบเว็บไซต์และเว็บแอปพลิเคชันในเวอร์ชัน Chrome ที่ไม่ใช่เวอร์ชันเสถียร เพื่อช่วยระบุกรณีที่พบได้ยากก่อนที่จะเปิดตัวฟีเจอร์นี้ในเวอร์ชันเสถียร
หากสิ่งต่างๆ เริ่มหยุดทำงานหรือคุณพบลักษณะการทำงานของการเลื่อนที่ไม่คาดคิด โปรด รายงานข้อบกพร่อง Chromium