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

Bramus
Free Debreuil
Free Debreuil
LinkedIn

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

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

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

התכונה זמינה לבדיקות של מפתחים ב-Chrome 153 בערוצי ההפצה 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 מחפש את רכיב ה-scroller הקרוב ביותר ברמת האב לכל ציר, התוצאה היא רכיב .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 בציר ה-X.

אם אתם קוראים את הפוסט הזה בדפדפן עם תמיכה, תוכלו לראות את הפעולה שלו בהדגמה הבאה:

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

הקלטת הדגמה

התנהגויות מושפעות

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

  • ‫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.