چرخ فلک با CSS

Adam Argyle

تاریخ انتشار: 20 مارس 2025

از Chrome 135، می‌توانید از ویژگی‌های CSS Overflow 5 استفاده کنید که برای ایجاد تجربه‌های اسکرول و چرخ فلک طراحی شده‌اند.

این پست مروری بر بسیاری از تجربه‌های مختلف اسکرول و چرخ فلک است که با استفاده از این ویژگی‌های جدید و بدون جاوا اسکریپت انجام شده است. ویدیوی زیر را تماشا کنید و برای آنچه اکنون می توان به دست آورد هیجان زده شوید.

در این ویدیو هماهنگی از دکمه‌های اسکرول، نشانگرهای اسکرول، انیمیشن‌های اسکرول، پرس‌وجوهای scroll-state()، :has()، گرید، لنگر و موارد دیگر نشان داده شده است.

حتی تاثیرگذارتر داستان دسترسی است.

به لطف تیم های مهندسی و قابلیت دسترسی که با هم کار می کنند، بهترین شیوه های چرخ فلک توسط مرورگر مدیریت می شود. ساخت یک چرخ فلک در دسترس تر از این بسیار دشوار است.

نماگرفت درخت دسترسی چرخ فلک کروم DevTools — نسخه نمایشی

Meet ::scroll-button() و ::scroll-marker()

چرخ فلک یک منطقه اسکرول با حداکثر دو رابط کاربری اضافه شده است - دکمه ها و نشانگرها.

در نسخه یکی از ویژگی های چرخ فلک CSS، دکمه ها و نشانگرها از CSS ایجاد می شوند. مرورگر عناصر را به عنوان خواهر و برادر، با نقش‌های مناسب، در ترتیب برگه‌های مناسب قرار می‌دهد و حالت آنها را حفظ می‌کند. این امر توسعه یک چرخ فلک قابل دسترس را آسان تر می کند.

• دکمه های اسکرول
  مرورگر ارائه شده است، عناصر <button> دارای قابلیت اسکرول و تعاملی است که به دسترسی به محتوا کمک می کند و با فشار دادن 85٪ از یک ناحیه اسکرول را اسکرول می کند.

• نشانگرهای اسکرول
  مرورگر ارائه شده، عناصر ناوبری حالت دار <a> که به دسترسی به محتوا برای هر مورد درخواستی در ناحیه اسکرول کمک می کند.

بقیه این پست نشان می دهد که چگونه با استفاده از این ویژگی های جدید یک چرخ فلک بسازید.

با یک اسکرول شروع کنید

می توانید دکمه ها و نشانگرها را به هر ناحیه اسکرول در سایت خود اضافه کنید.

CSS زیر یک ناحیه اسکرول اولیه را برای استفاده در مراحل بعدی برای اضافه کردن دکمه ها و نشانگرها ایجاد می کند. Scroll Snapping برای چرخ فلک لازم نیست، اما در این مثال از آن استفاده شده است. چرخ فلک ها برای اسکرول های عمودی و اسکرول های دو طرفه نیز کار می کنند.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

یک ناحیه اسکرول نشان داده شده است که هیچ هزینه یا سرنخی به جز قطع شدن محتوا ندارد.

اضافه کردن دکمه های اسکرول با ::scroll-button()

بسته به سیستم عامل شما، ممکن است از قبل دکمه های اسکرول در اطراف نوارهای اسکرول شما وجود داشته باشد. دکمه‌های نوار پیمایش داخلی یک ناحیه اسکرول را به حرکت در می‌آورند، در حالی که دکمه‌های اسکرول CSS 85٪ از منطقه اسکرول را صفحه می‌کنند.

برای چرخ فلک‌هایی که هر بار فقط یک مورد با عرض کامل را با نقاط اسکرول نشان می‌دهند، به نظر مقدار مورد به مورد می‌رسد. برای لیست‌های طولانی از مواردی که در آن‌ها بیش از یک مورد در یک زمان مشاهده می‌شود، تقریباً یک صفحه کامل را پیمایش می‌کند.

توجه: اگر می‌خواهید دکمه‌ها دقیقاً یک مورد را در یک زمان جابجا کنند، scroll-snap-type: x mandatory همراه با scroll-snap-stop: always روی هر فرزند snap.

برای افزودن دکمه های اسکرول با CSS:

1. آنها را مانند سایر عناصر شبه، با انتخابگر اضافه کنید: .carousel::scroll-button(right) تا دکمه ای به سمت راست حرکت کند.
2. content با متن جایگزین قابل دسترسی اختیاری مشخص کنید.

مرورگر دکمه های واقعی را با محتوای شما در داخل، به عنوان خواهر و برادر به اسکرولر ایجاد می کند. شما اکنون آزاد هستید که این دکمه ها را قرار دهید، به آنها استایل دهید یا آن ها را در صورت نیاز anchor() . این CSS زیر دو را ایجاد می کند، یکی برای دکمه اسکرول سمت چپ و دیگری برای دکمه اسکرول سمت راست.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*)::focus-visible {
    outline-offset: 5px;
  }
}

نسخه ی نمایشی

اضافه کردن نشانگرهای اسکرول با ::scroll-marker()

مشابه عنصر انگشت شست نوار پیمایش، نشانگرهای اسکرول CSS می توانند به اندازه چرخ فلک اشاره کنند و در عین حال امکان حرکت سریع به انتها یا آغاز را نیز فراهم کنند. نشانگر پیمایش CSS با نوار پیمایش متفاوت است زیرا هر نشانگر پیوندی است که می تواند هر موردی را در اسکرول نشان دهد.

نمونه ای از این تمایز، فصل های یک سریال تلویزیونی را در نظر بگیرید. به جای ساختن یک نشانگر برای هر یک از 10 قسمت، 2 نشانگر ایجاد کنید که به ابتدای فصل می رود.

توجه داشته باشید که این نشانگرها نقطه نیستند، آنها از content: "Season 1" عنصر شبه خود. نشانگرها همچنین می‌توانند تصاویر کوچکی باشند که معمولاً برای چرخ فلک‌های گالری در تجارت الکترونیک یا وب‌سایت‌های متمرکز بر عکس استفاده می‌شوند.

نشانگرها مانند پیوندهای <a> درون صفحه هستند، اما دارای برخی ویژگی های خاص هستند:

1. آنها شامل یک وضعیت :target-current برای زمانی که نشانگر در معرض دید است یا قطع شده است.
2. پیمایش صفحه کلید گنجانده شده است و مانند یک گروه فوکوس رفتار می کند.
3. تجربه صفحه‌خوان گنجانده شده است، و مانند یک جدول گزارش می‌دهد.

با مراحل زیر نشانگرها را به نقاط مهم مورد علاقه در اسکرول خود اضافه کنید:

1. محل قرارگیری scroll-marker-group به صورت before یا after تعریف کنید.
2. نقاط مورد علاقه را با انتخابگر .carousel .point-of-interest::scroll-marker انتخاب کنید.
3. content با متن جایگزین قابل دسترسی اختیاری مشخص کنید. اعداد، متن، خالی یا تصویر.

مرورگر همه نشانگرها را ایجاد می کند و آنها را در ظرف گروه نشانگر قرار می دهد. این مثال یک نشانگر خالی برای هر <li> ایجاد می کند تا برای هر مورد یک نقطه نشانگر ایجاد کند.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}

نسخه ی نمایشی

عنصر حاوی نشانگرها یک ::scroll-marker-group نامیده می شود و به عنوان خواهر و برادر اسکرول درست مانند دکمه های اسکرول ایجاد می شود. این ظرف را می توان مدل داد و در هر کجا که نیاز دارید قرار داد.

نشانگرها و دکمه ها در همان زمان

این دو را در کنار هم قرار دهید و تجربه مانند یک چرخ فلک به نظر می رسد اما دارای مزایای زیر است:

• با جاوا اسکریپت غیرفعال کار می کند.
• بدون هیدراتاسیون یا تنبلی سایز (کاهش CLS).
• آماده برای انواع انیمیشن های اسکرول و محرک ها.
• دسترسی گنجانده شده است.
• سازگار با لمس، ماوس و صفحه کلید.

کمتر انجام دهید، بیشتر، سریعتر برسید.

نسخه ی نمایشی

منابع

این پست بیشتر به این ویژگی ها به عنوان "چرخ و فلک" اشاره می کند، اما قابلیت ها و مفید بودن آنها بسیار فراتر از موارد استفاده از چرخ فلک است. برای یک تصویر کامل از پتانسیل این ویژگی‌های جدید، گالری چرخ فلک را امتحان کنید و سایر مؤلفه‌ها مانند: Scrollspy، زبانه‌ها و اسلایدها را ببینید.

• استانداردهای وب
  • سرریز CSS 5
  • توضیح دهنده چرخ فلک
  • WAI Aria Carousel
• کروم
  • قصد حمل
  • گالری چرخ فلک
  • پیکربندی چرخ فلک

پیکربندی چرخ فلک

برای یادگیرندگان بصری و تعاملی، پیکربندی چرخ فلک را امتحان کنید.

برای مثال دکمه‌های اسکرول، سوئیچ‌ها را ارائه می‌کند، و هنگامی که چرخ فلک نشان داده شده فعال شود، بلافاصله دکمه‌هایی به‌علاوه CSS مربوطه ظاهر می‌شود.

https://chrome.dev/carousel-configurator/

همچنین شامل نمونه هایی از مفاهیم پیشرفته تر است که در مجاورت چرخ فلک قرار دارند:

• تعامل
• حالت اسکرول
• انیمیشن اسکرول محور
• و ستون های اسنپ را اسکرول کنید

گالری چرخ فلک

فضای ویترینی برای کسانی که کنجکاو هستند تا چه اندازه می‌توانید این ویژگی‌ها را ببرید و به سؤالاتی مانند «آیا می‌تواند X را انجام دهد؟» پاسخ می‌دهد. هر نسخه ی نمایشی بر اساس یک مورد استفاده در سراسر اینترنت است. هر نسخه نمایشی نشان می دهد که چگونه می توان این دکمه ها و نشانگرها را با انیمیشن های اسکرول ، پرس و جوهای scroll-state() و موارد دیگر هماهنگ کرد.

واقعیت جالب، کل سایت بدون جاوا اسکریپت است.

https://chrome.dev/carousel/

نمونه‌ها از بسیار ساده تا فوق‌العاده قوی و دارای ویژگی‌های غنی هستند. مرور گالری باید الهام بخش، اطمینان بخش و البته قابل بازرسی برای گرفتن کد باشد. @layer utilities برای ابزارهایی که می توانند به شما در ساخت چرخ فلک کمک کنند، پیدا کنید و بررسی کنید.

کار بیشتر

ما به این افتخار می کنیم که چگونه این ویژگی ها با تمام HTML و CSS ادغام می شوند. دسترسی به چرخ فلک CSS درجه یک است. عملکرد یک چرخ فلک CSS بهتر از هر راه حل جاوا اسکریپت است. تجربه کاربری یک چرخ فلک CSS طبیعی، روان و غنی است. با این حال، راه هایی برای بهبود وجود دارد.

عناصر خود را بیاورید

کار در حال انجام است تا بتوانید اجزای خود را برای دکمه‌های اسکرول و نشانگرها اضافه کنید. این بدان معناست که شما می‌توانید تگ‌های <a> خود را که دارای محتوای غنی مانند آیکون‌ها هستند، تهیه کنید. همچنین می توانید دکمه های چند لایه خود را که با Tailwind ساخته شده است، بیاورید.

پیمایش چرخه ای

بسیاری از چرخ و فلک ها وقتی به انتها می رسند روی خود می پیچند، مانند چرخ و فلک سواری در نمایشگاه. این در رادار ما است و ما قصد داریم یک راه حل پلت فرم برای آن ارائه کنیم.

امیدواریم از این ویژگی لذت ببرید. ما مشتاقانه منتظر همه کاربران وب "غیرفعال شده جاوا اسکریپت" هستیم که اکنون یک تجربه قابل پیمایش خوب و تمام کاهش های CLS را از چرخه عمر زمان بندی شده بهتر یک چرخ فلک داخلی به دست می آورند.

کارهای کمتری برای شما، تجربه کاربری عالی، عملکرد بهتر.