מוכן לבדיקות מפתחים: מאגרי גלילה חד-ציריים

Bramus
Free Debreuil
Free Debreuil
LinkedIn

פורסם: 4 בספטמבר 2026

התכונה 'קונטיינרים של גלילה בציר אחד' מרחיבה את מאפיין ה-CSS‏ overflow כדי לתמוך בערכים שניתנים לגלילה (auto, ‏ scroll, ‏ hidden) בשילוב עם clip (לדוגמה, overflow: scroll clip), וכך נוצרים קונטיינרים של גלילה רק בציר אחד.

השינוי הזה מאפשר להשתמש בתכונות מבוקשות מאוד כמו מיקום קבוע לכל ציר, אבל הוא גם גורם לתופעות לוואי נוספות בתכונות אחרות שתלויות בגלילה. בגלל הסיכונים האפשריים האלה לתאימות, אנחנו מבקשים ממפתחים לבדוק את האתרים שלהם ולספק משוב לפני שהתכונה הזו תושק בערוצים יציבים.

התכונה זמינה לבדיקות של מפתחים ב-Chrome 154 בערוצי ההפצה Beta,‏ Dev ו-Canary. אין צורך להפעיל דגל.

הבעיה בהגדרת גלישה בציר אחד

ללא התכונה הזו, אי אפשר ליצור קונטיינר גלילה חד-צירי אמיתי באמצעות CSS. אם מגדירים ציר אחד לגלילה ומנסים לשמור על הציר השני גלוי (למשל, הגדרת overflow-x: scroll והשארת overflow-y: visible), מנוע הסגנון של הדפדפן מאלץ באופן אוטומטי את הציר הגלוי להיות auto (או scroll). כך נוצר רכיב גלילה דו-ממדי, גם אם לא התכוונתם לכך.

הבעיה הזו בולטת מאוד כשמנסים ליצור טבלה עם שורה עליונה קבועה ועמודה ראשונה קבועה. בדוגמה הבאה, המטרה היא שהעמודה הראשונה תישאר במקום בזמן הגלילה האופקית של .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 הופך למעשה לאזור גלילה דו-ממדי. לכן, כש-position: sticky מחפש את רכיב הגלילה הקרוב ביותר ברמת האב לכל ציר, התוצאה היא הרכיב .table-wrapper בשני המקרים.

הדגמה בשידור חי

הקלטת הדגמה

קונטיינרים של גלילה בציר יחיד פותרים את המוזרות הזו

במקרים של קונטיינרים עם גלילה בציר אחד, אפשר למנוע באופן מפורש את הפיכת הציר המשני לאזור גלילה באמצעות clip. כך, position: sticky יכול לעקוב אחרי שני מאגרי גלילה שונים באופן עצמאי.

כדי לתקן את הדוגמה של הטבלה, משלבים את הגלילה האופקית עם 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()) במאגר גלילה חד-צירי מחייבת עכשיו אילוצים פרוגרמטיים של גלילה. האלמנט לא יאפשר גלילה פרוגרמטית לאורך הציר שמוגדר כ-clip.
  • גודל תא מינימלי בפריסה של 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.