منتشر شده: ۴ سپتامبر ۲۰۲۶
ویژگی «ظروف اسکرول تک محوره» ویژگی overflow در CSS را گسترش میدهد تا از مقادیر قابل اسکرول ( auto ، scroll ، hidden ) همراه با clip (برای مثال، overflow: scroll clip ) پشتیبانی کند و در نتیجه، ظروف اسکرول فقط برای یک محور ایجاد شوند.
اگرچه این تغییر ویژگیهای بسیار درخواستی مانند موقعیتیابی چسبنده در هر محور را فعال میکند، اما عوارض جانبی دیگری را نیز در سایر ویژگیهای وابسته به اسکرول ایجاد میکند. به دلیل این خطرات سازگاری بالقوه، از توسعهدهندگان میخواهیم که وبسایتهای خود را آزمایش کرده و قبل از انتشار این ویژگی در کانالهای پایدار، بازخورد خود را ارائه دهند.
این ویژگی برای آزمایش توسعهدهندگان در کروم ۱۵۳ در کانالهای انتشار بتا، توسعهدهندگان و Canary در دسترس است. نیازی به فعال کردن پرچم (flag) ندارید.
مشکل سرریز تنظیمات روی یک محور
بدون این ویژگی، ایجاد یک محفظه اسکرول واقعاً تکمحوره با 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ممکن است دیگر روی محور برش خورده فعال نشود، که به طور بالقوه بر جلوههای سفارشی pull-to-refresh یا bounce تأثیر میگذارد. این تغییر در رفتار با فایرفاکس و سافاری مطابقت دارد. - پیمایش برنامهریزیشده : فراخوانی APIهای پیمایش (مانند
Element.scrollTo()) روی یک کانتینر پیمایش تکمحوره، اکنون محدودیتهای پیمایش برنامهریزیشده را اعمال میکند. عنصر از پیمایش برنامهریزیشده در امتداد محوری که به عنوان کلیپ تعریف شده است، امتناع خواهد ورزید. - حداقل اندازه سلول Grid و Flex : برای کانتینرهای اسکرول در طرحبندی grid و flex، حداقل اندازه پیشفرض (
min-width: auto) معمولاً نادیده گرفته میشود تا سلولها بتوانند خود را با فضای موجود تنظیم کنند. وقتیoverflow: clipروی همان محور تنظیم شود، حداقل اندازه پیشفرض شروع به تأثیرگذاری میکند و به طور بالقوه باعث میشود کانتینر flex یا grid بزرگتر شود.
تشخیص ویژگی
برای تشخیص پشتیبانی از کانتینرهای اسکرول تک محوره، با استفاده از کلمه کلیدی single-axis-scroll-container دستور @supports named-feature() را جستجو کنید.
@supports named-feature(single-axis-scroll-container) {
/* Feature is supported */
}
همانطور که در شماره ۱۳۶۷۷ CSSWG بحث شده است، استفاده از named-feature(single-axis-scroll-container) روش استاندارد توصیه شده برای تشخیص این قابلیت است، زیرا بررسی با استفاده از @supports (overflow: scroll clip) به تنهایی فقط بررسی تجزیه است، که تشخیص نمیدهد که آیا مرورگر رفتارهای پیمایش تک محوره اصلاح شده را به درستی مدیریت میکند یا خیر.
در جاوا اسکریپت، برای انجام این بررسی CSS.supports("named-feature(single-axis-scroll-container)") استفاده کنید.
بازخورد مورد نظر
برای ارزیابی خطرات احتمالی سازگاری، آزمایشهایی در ۱۹۰ وبسایت انجام شده است. بر اساس این تحلیل، به نظر نمیرسد که این تغییرات هیچ نقص قابل توجهی ایجاد کنند.
با این حال، از آنجا که کانتینرهای اسکرول تک محوره اساساً نحوه ارزیابی زمینههای اسکرول را تغییر میدهند، شبکه وسیعتری در حال بررسی است. از شما خواسته میشود وبسایتها و برنامههای وب را روی کانالهای ناپایدار کروم آزمایش کنید تا قبل از اینکه این ویژگی به نسخه پایدار برسد، هرگونه مورد حاشیهای را شناسایی کنید.
اگر اوضاع برای شما خراب شد، یا اگر با رفتار پیمایش غیرمنتظرهای مواجه شدید، لطفاً یک اشکال کرومیوم ثبت کنید .