اسکرول به خوبی کنترل شده با CSS Scroll Snap

با اعلام موقعیت‌های اسکرول کردن، تجربه‌های اسکرول به خوبی کنترل شده ایجاد کنید.

Robert Flack

Majid Valipour

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

پس زمینه

مورد برای اسکرول snapping

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

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

توسعه دهندگان وب از مدت ها قبل به راه حل های مبتنی بر جاوا اسکریپت برای کنترل اسکرول برای کمک به رفع این نقص اعتماد کرده اند. با این حال، راه‌حل‌های مبتنی بر جاوا اسکریپت به دلیل عدم وجود اصول اولیه سفارشی‌سازی اسکرول یا دسترسی به پیمایش ترکیبی، نمی‌توانند راه‌حلی با وفاداری کامل ارائه دهند. CSS Scroll Snap راه حلی سریع، وفاداری بالا و استفاده آسان را تضمین می کند که به طور مداوم در مرورگرها کار می کند.

CSS Scroll Snap به نویسندگان وب اجازه می دهد تا هر محفظه اسکرول را با مرزهایی برای عملیات اسکرول علامت گذاری کنند که در آن به پایان برسد. سپس مرورگرها مناسب‌ترین موقعیت انتهایی را بسته به جزئیات عملیات اسکرول، طرح‌بندی ظرف پیمایش و قابلیت مشاهده، و جزئیات موقعیت‌های snap انتخاب می‌کنند، سپس به آرامی به آن متحرک می‌شوند. به مثال قبلی خود برگردیم، وقتی کاربر پیمایش چرخ فلک را تمام می کند، تصویر قابل مشاهده آن در جای خود می چفتد. بدون نیاز به تنظیمات اسکرول توسط جاوا اسکریپت.

CSS Scroll Snap

Scroll Snapping عمل تنظیم افست پیمایش یک محفظه اسکرول است تا پس از پایان عملیات اسکرول در موقعیت گیره ترجیحی قرار گیرد.

با استفاده از ویژگی scroll-snap-type یک محفظه اسکرول را می توان برای اسکرول اسنپ انتخاب کرد. این به مرورگر می‌گوید که باید این محفظه اسکرول را در موقعیت‌های گیره‌ای که توسط فرزندانش ایجاد شده است، در نظر بگیرد. scroll-snap-type محوری را که پیمایش روی آن انجام می‌شود را تعیین می‌کند: x ، y ، یا both ، و سخت‌گیری snapping: mandatory ، proximity . در ادامه بیشتر در مورد اینها

با اعلام تراز دلخواه بر روی یک عنصر می توان یک موقعیت snap ایجاد کرد. این موقعیت، افست اسکرول است که در آن نزدیکترین محفظه اسکرول اجداد و عنصر همانطور که برای محور داده شده مشخص شده است، تراز می شوند. ترازهای زیر در هر محور امکان پذیر است: start ، end ، center .

تراز start به این معنی است که لبه شروع snapport محفظه اسکرول باید با لبه شروع منطقه snap عنصر همسطح شود. به طور مشابه، ترازهای end و center به این معنی است که لبه یا مرکز انتهایی محفظه اسنپ باید با لبه یا مرکز انتهایی ناحیه گیره المان تراز شود.

مثال های زیر نحوه استفاده از این مفاهیم را نشان می دهد.

مثال: یک گالری افقی

یک مورد رایج برای اسکرول کردن، چرخ فلک تصویر است. به عنوان مثال، برای ایجاد یک چرخ فلک تصویر افقی که در حین پیمایش به هر تصویر می‌چسبد، می‌توانیم محفظه اسکرول را مشخص کنیم که یک scroll-snap-type اجباری در محور افقی داشته باشد. هر تصویر را به scroll-snap-align: center قرار دهید تا اطمینان حاصل کنید که snapping تصویر را در مرکز چرخ فلک قرار می دهد.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

<div id="gallery">
  <img src="cat.jpg">
  <img src="dog.jpg">
  <img src="another_cute_animal.jpg">
</div>

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

مثال: صفحه محصول سفر شده

یکی دیگر از موارد رایجی که می‌تواند از اسکرول کردن سود ببرد، صفحاتی با بخش‌های منطقی متعدد برای پیمایش عمودی، برای مثال، یک صفحه محصول معمولی است. scroll-snap-type: y proximity; برای مواردی از این دست مناسب تر است. وقتی کاربر به وسط یک بخش خاص اسکرول می‌کند، تداخلی ایجاد نمی‌کند، اما وقتی کاربر به اندازه کافی نزدیک می‌شود، می‌چپد و توجه را به بخش جدیدی جلب می‌کند.

در اینجا نحوه دستیابی به این امر آمده است:

article {
  scroll-snap-type: y proximity;
  /* Reserve space for header plus some extra space for sneak peeking. */
  scroll-padding-top: 15vh;
  overflow-y: scroll;
}
section {
  /* Snap align start. */
  scroll-snap-align: start;
}
header {
  position: fixed;
  height: 10vh;
}

<article>
  <header> Header </header>
  <section> Section One </section>
  <section> Section Two </section>
  <section> Section Three </section>
</article>

صفحه اسکرول و حاشیه

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

ویژگی scroll-padding یک ویژگی جدید css است که می‌تواند برای تنظیم ناحیه قابل مشاهده موثر ظرف اسکرول یا snapport استفاده شود که هنگام محاسبه ترازهای اسکرول اسنپ استفاده می‌شود. این ویژگی یک inset را در مقابل جعبه padding ظرف اسکرول تعریف می کند. در مثال ما، 15vh ساعت ورودی اضافی به بالا اضافه شد، که به مرورگر دستور می‌دهد یک موقعیت پایین‌تر، 15vh زیر لبه بالایی محفظه اسکرول، به عنوان لبه شروع عمودی آن برای اسکرول کردن در نظر بگیرد. هنگام چفت شدن، لبه شروع عنصر هدف snap با این موقعیت جدید یکدست می شود، بنابراین فضایی در بالا باقی می ماند.

ویژگی scroll-margin مقدار اولیه مورد استفاده برای تنظیم کادر موثر Snap target مشابه نحوه عملکرد scroll-padding در ظرف اسنپ اسکرول را مشخص می کند.

شاید متوجه شده باشید که این دو ویژگی کلمه snap را در خود ندارند. این عمدی است زیرا آنها در واقع کادر را برای تمام عملیات اسکرول مربوطه تغییر می دهند و فقط اسکرول کردن نیستند. برای مثال، Chrome آنها را هنگام محاسبه اندازه صفحه برای عملیات پیمایش صفحه‌بندی مانند PageDown و PageUp و همچنین هنگام محاسبه مقدار اسکرول برای عملیات Element.scrollIntoView() در نظر می‌گیرد.

تعامل با سایر APIهای اسکرول

DOM Scrolling API

اسکرول اسنپینگ پس از تمام عملیات اسکرول از جمله آنهایی که توسط اسکریپت آغاز شده اند اتفاق می افتد. هنگامی که از API هایی مانند Element.scrollTo استفاده می کنید، مرورگر موقعیت اسکرول مورد نظر عملیات را محاسبه می کند، سپس منطق snapping مناسب را برای یافتن مکان قطع شده نهایی اعمال می کند. بنابراین، نیازی به اسکریپت کاربر برای انجام هر گونه محاسبات دستی برای snapping وجود ندارد.

پیمایش صاف

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

رفتار Overscroll

API رفتار Overscroll نحوه زنجیر شدن اسکرول در چندین عنصر را کنترل می کند و تحت تأثیر اسکرول اسنپ قرار نمی گیرد.

هشدارها و بهترین شیوه ها

هنگامی که عناصر هدف از هم فاصله زیادی دارند، از گیر دادن اجباری خودداری کنید. این می تواند باعث شود که محتوای بین موقعیت های snap غیر قابل دسترس شود.

در بسیاری از موارد اسکرول snapping را می توان به عنوان یک پیشرفت بدون نیاز به شناسایی ویژگی اضافه کرد. در صورت نیاز، از @supports یا CSS.supports برای شناسایی پشتیبانی از CSS Scroll Snap استفاده کنید. از استفاده از scroll-snap-type که در مشخصات منسوخ نیز وجود دارد خودداری کنید.

تشخیص ویژگی در CSS

@supports (scroll-snap-align: start) {
  article {
    scroll-snap-type: y proximity;
    scroll-padding-top: 15vh;
    overflow-y: scroll;
  }
}

تشخیص ویژگی در جاوا اسکریپت

if (CSS.supports('scroll-snap-align: start')) {
  // use css scroll snap
} else {
  // use fallback
}

فرض نکنید که APIهای پیمایش برنامه‌ریزی‌شده مانند Element.scrollTo همیشه در افست اسکرول درخواستی به پایان می‌رسند. اسکرول کردن ممکن است پس از تکمیل پیمایش برنامه‌ریزی، افست پیمایش را تنظیم کند. توجه داشته باشید که حتی قبل از اسکرول این فرض خوب نبود، زیرا ممکن است پیمایش به دلایل دیگر قطع شده باشد، اما این مورد به ویژه در مورد اسکرول اسنپ صادق است.

کار آینده

تجربه پیمایش محور نظرسنجی اخیر تیم Chrome بود. نتایج نظرسنجی چندین حوزه را شناسایی کرد که برای کاهش شکاف بین کتابخانه‌های پلاگین و CSS نیاز به کار بیشتری دارند. کارهای آینده بر روی scroll-snap تمرکز خواهند کرد، از جمله:

1. در دسترس بودن و سازگاری API در مرورگرها.
2. روی APIهای CSS جدید مانند scroll-start کار کنید.
3. روی رویدادهای جدید JS مانند snapChanged() کار کنید.