เผยแพร่: 4 ก.ย. 2026
ฟีเจอร์ "คอนเทนเนอร์เลื่อนแกนเดียว" จะขยายพร็อพเพอร์ตี้ CSS overflow เพื่อรองรับค่าที่เลื่อนได้ (auto, scroll, hidden) ที่รวมกับ clip (เช่น overflow: scroll clip) ซึ่งส่งผลให้เกิดคอนเทนเนอร์เลื่อนสำหรับแกนเดียวเท่านั้น
แม้ว่าการเปลี่ยนแปลงนี้จะช่วยให้ใช้ฟีเจอร์ที่มีการร้องขอเป็นจำนวนมากได้ เช่น การวางตำแหน่งแบบยึดติดต่อแกน แต่ก็อาจส่งผลข้างเคียงเพิ่มเติมในฟีเจอร์อื่นๆ ที่ขึ้นอยู่กับการเลื่อนด้วย เนื่องจากความเสี่ยงที่อาจเกิดขึ้นเกี่ยวกับการทำงานร่วมกันเหล่านี้ เราจึงขอให้นักพัฒนาแอปทดสอบเว็บไซต์และแสดงความคิดเห็นก่อนที่จะเปิดตัวฟีเจอร์นี้ในช่องทางเสถียร
ฟีเจอร์นี้พร้อมให้ทดสอบสำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 154 ในช่องการเผยแพร่เวอร์ชันเบต้า เวอร์ชันที่กำลังพัฒนา และเวอร์ชัน Canary คุณไม่จำเป็นต้องเปิด Flag
ข้อควรทราบเกี่ยวกับการตั้งค่าการล้นในแกนใดแกนหนึ่ง
หากไม่มีฟีเจอร์นี้ คุณจะสร้างคอนเทนเนอร์เลื่อนแกนเดียวอย่างแท้จริงด้วย CSS ไม่ได้ หากคุณกำหนดค่าแกนหนึ่งให้เลื่อนขณะพยายามทำให้แกนอีกแกนหนึ่งมองเห็นได้ (เช่น ตั้งค่า overflow-x: scroll และปล่อย overflow-y: visible ไว้) เครื่องมือจัดรูปแบบของเบราว์เซอร์จะบังคับให้แกนที่มองเห็นได้คำนวณเป็น auto (หรือ scroll) โดยอัตโนมัติ ซึ่งจะสร้างตัวเลื่อนแบบ 2 มิติแม้ว่าคุณจะไม่ได้ตั้งใจก็ตาม
ข้อบกพร่องนี้จะเห็นได้ชัดเจนเมื่อพยายามสร้างตารางที่มีแถวบนสุดและคอลัมน์แรกแบบตรึง ในตัวอย่างต่อไปนี้ เป้าหมายคือให้คอลัมน์แรกติดกับ .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 เท่านั้น ตอนนี้แถวบนที่ปักหมุดไว้จะข้ามส่วนนี้และปักหมุดไว้กับแถบเลื่อนของเอกสารในแกน Y อย่างถูกต้อง ขณะที่คอลัมน์แรกจะยังคงปักหมุดไว้กับ .table-wrapper ในแนวนอน
หากคุณกำลังดูโพสต์นี้ในเบราว์เซอร์ที่รองรับ คุณจะเห็นการทำงานของฟีเจอร์นี้ในการสาธิตต่อไปนี้
การสาธิตสด
การบันทึกการสาธิต
ลักษณะการทำงานที่ได้รับผลกระทบ
เนื่องจากคอนเทนเนอร์เลื่อนแกนเดียวจะเปลี่ยนวิธีประเมินและสร้างบริบทการเลื่อน คุณจึงอาจสังเกตเห็นการเปลี่ยนแปลงในฟีเจอร์อื่นๆ ที่อาศัยคอนเทนเนอร์เลื่อน เช่น
position: sticky: ดังที่แสดง องค์ประกอบจะติดอยู่ในคอนเทนเนอร์เลื่อนแกนเดียวอย่างถูกต้อง ซึ่งจะปรับปรุงลักษณะการทำงานขององค์ประกอบที่จำกัดโดยoverflow: clipในแกนเดียวoverscroll-behavior: เนื่องจากตอนนี้องค์ประกอบสามารถเป็นคอนเทนเนอร์เลื่อนในแกนเดียวได้overscroll-behaviorอาจไม่ทริกเกอร์ในแกนที่ถูกตัดอีกต่อไป ซึ่งอาจส่งผลต่อเอฟเฟกต์การดึงเพื่อรีเฟรชหรือเอฟเฟกต์การดีดกลับที่กำหนดเอง การเปลี่ยนแปลงลักษณะการทำงานนี้จะตรงกับ Firefox และ Safari- การเลื่อนแบบเป็นโปรแกรม: การเรียกใช้ API การเลื่อน (เช่น
Element.scrollTo()) ในคอนเทนเนอร์เลื่อนแบบแกนเดียวจะบังคับใช้ข้อจำกัดการเลื่อนแบบเป็นโปรแกรม องค์ประกอบจะไม่ยอมเลื่อนโดยใช้โปรแกรมตามแกนที่กำหนดเป็นคลิป - การกำหนดขนาดเซลล์ขั้นต่ำของกริดและ Flex: สำหรับคอนเทนเนอร์ที่เลื่อนได้ในเลย์เอาต์กริดและ 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