با اعلام موقعیت‌های میزان کردن پیمایش، تجربه‌های پیمایش به‌خوبی کنترل‌شده ایجاد کنید.
ویژگی CSS Scroll Snap به توسعه‌دهندگان وب امکان می‌دهد با اعلام موقعیت‌های میزان کردن پیمایش، تجربه‌های پیمایش به‌خوبی کنترل‌شده‌ای ایجاد کنند. مقاله‌های صفحه‌بندی‌شده و گردونه‌های تصویر دو نمونه رایج از این مورد هستند. CSS Scroll Snap یک میانای برنامه‌سازی کاربردی آسان و سازگار برای ساختن این الگوهای محبوب تجربه کاربری ارائه می‌دهد.
پس‌زمینه
مورد برای میزان کردن پیمایش
پیمایش روشی محبوب و طبیعی برای تعامل با محتوا در وب است. این روش بومی پلاتفرم برای ارائه دسترسی به اطلاعات بیشتر از آنچه به‌طور هم‌زمان روی صفحه قابل‌مشاهده است، به‌ویژه در پلاتفرم‌های تلفن همراه با فضای محدود صفحه، بسیار حیاتی است. بنابراین جای تعجب نیست که نویسندگان وب به‌طور فزاینده‌ای ترجیح می‌دهند محتوا را در فهرست‌های مسطح قابل‌پیمایش سازماندهی کنند تا سلسله‌مراتب عمیق.
اشکال اصلی پیمایش عدم دقت آن است. به‌ندرت پیش می‌آید که پیمایش در تراز با پاراگراف یا جمله تمام شود. این موضوع برای محتوای صفحه‌بندی‌شده یا فهرست‌شده با مرزهای معنادار، زمانی که پیمایش در وسط صفحه یا تصویر به پایان می‌رسد و آن را به‌صورت جزئی قابل‌مشاهده می‌گذارد، بیشتر نمایان می‌شود. این موارد استفاده از تجربه پیمایش به‌خوبی کنترل‌شده بهره می‌برند.
توسعه‌دهندگان وب مدت‌ها است که برای کنترل پیمایش به راه‌حل‌های مبتنی بر جاوا اسکریپت تکیه می‌کنند تا به رفع این کاستی کمک کنند. بااین‌حال، راه‌حل‌های مبتنی بر جاوا اسکریپت به‌دلیل فقدان عناصر اولیه سفارشی‌سازی پیمایش یا دسترسی به پیمایش ترکیبی، نمی‌توانند راه‌حلی با وفاداری کامل ارائه دهند. CSS Scroll Snap راهکاری سریع، با وفاداری بالا، و با کاربری آسان را تضمین می‌کند که به‌طور هماهنگ در مرورگرها کار می‌کند.
CSS Scroll Snap به نویسندگان وب اجازه می‌دهد هر محفظه پیمایش را با مرزهایی برای عملیات پیمایش علامت‌گذاری کنند تا در آنجا به پایان برسد. سپس مرورگرها مناسب‌ترین موقعیت پایانی را براساس جزئیات عملیات پیمایش، چیدمان و نمایان بودن محفظه پیمایش، و جزئیات موقعیت‌های چسبیدن انتخاب می‌کنند و سپس به‌آرامی به آن موقعیت پویانمایی می‌کنند. به مثال قبلی‌مان برمی‌گردیم، وقتی کاربر پیمایش گردونه را تمام می‌کند، تصویر نمایان آن در جای خود قرار می‌گیرد. جاوا اسکریپت به هیچ تنظیم پیمایشی نیاز ندارد.
میزان کردن پیمایش CSS
میزان کردن پیمایش عبارت است از تنظیم کردن افست پیمایش محفظه پیمایش به‌نحوی که پس‌از پایان عملیات پیمایش، در موقعیت میزان‌شده ترجیحی قرار گیرد.
بااستفاده از ویژگی
scroll-snap-type
می‌توان یک محفظه پیمایش را برای میزان کردن پیمایش انتخاب کرد. این به مرورگر می‌گوید که باید این محفظه پیمایش را به موقعیت‌های چسبیدن تولیدشده توسط فرزندانش بچسباند. scroll-snap-type
محوری را که پیمایش روی آن انجام می‌شود تعیین می‌کند: x، y، یا both، و
سخت‌گیری چسباندن: mandatory، proximity. بعداً درباره این موارد بیشتر توضیح می‌دهیم.
با اعلام تراز مطلوب روی یک عنصر، می‌توان موقعیت چسبیدن ایجاد کرد.
این موقعیت، آفست پیمایش است که در آن نزدیک‌ترین محفظه پیمایش جد و عنصر طبق آنچه برای محور داده‌شده مشخص شده است تراز می‌شوند. ترازهای
زیر در هر محور امکان‌پذیر است: start، end، center.
تراز start یعنی لبه شروع نقطه چسبیدن محفظه پیمایش باید با لبه شروع ناحیه چسبیدن عنصر هم‌تراز باشد. به‌طور مشابه، ترازهای end و center به این معنی است که لبه انتهایی یا مرکز نقطه چسبیدن محفظه پیمایش باید با لبه انتهایی یا مرکز ناحیه چسبیدن عنصر هم‌تراز شود.
مثال‌های زیر نحوه استفاده از این مفاهیم را نشان می‌دهند.
مثال: گالری افقی
یک مورد استفاده رایج برای میزان کردن پیمایش، گردونه تصویر است. برای مثال، برای
ایجاد یک گردونه تصویر افقی که هنگام پیمایش به هر تصویر می‌چسبد، می‌توانیم
مشخص کنیم که محفظه پیمایش دارای یک scroll-snap-type اجباری
در محور افقی باشد.
هر تصویر را روی scroll-snap-align: center تنظیم کنید تا مطمئن شوید که
چسبیدن تصویر را در مرکز گردونه قرار می‌دهد.
#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>
Because snap positions are associated with an element, the snapping algorithm can be smart about when and how it snaps given the element and the scroll container size. برای مثال، موردی را درنظر بگیرید که یک تصویر بزرگ‌تر از گردونه است. الگوریتم چسباندن ساده ممکن است مانع از حرکت کاربر به اطراف برای دیدن تصویر کامل شود. اما مشخصات نیاز به پیاده‌سازی برای تشخیص این مورد دارد و به کاربر اجازه می‌دهد آزادانه پیمایش کند در اطراف آن تصویر فقط در لبه‌های آن می‌چسبد.
مثال: صفحه محصولی که کاربر به آن هدایت شده است
Another common case that can benefit from scroll snapping are pages with
multiple logical sections to vertically scroll through, for example, a typical
product page. 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، استفاده کرد که
هنگام محاسبه ترازهای میزان کردن پیمایش استفاده می‌شود. این ویژگی یک تورفتگی را نسبت به جعبه حاشیه داخلی ظرف پیمایش تعریف می‌کند. در مثال ما، 15vh درج اضافی به بالا اضافه شد که به مرورگر دستور می‌دهد موقعیت پایین‌تری را (15vh زیر لبه بالایی محفظه پیمایش) به‌عنوان لبه شروع عمودی برای میزان کردن پیمایش درنظر بگیرد. هنگام چسباندن، لبه شروع عنصر هدف چسباندن با این موقعیت جدید هم‌تراز می‌شود و درنتیجه فضایی در بالا باقی می‌ماند.
ویژگی scroll-margin مقدار شروع مورداستفاده برای تنظیم جعبه مؤثر هدف چسباندن را تعریف می‌کند، مشابه نحوه عملکرد scroll-padding در محفظه پیمایش چسباندن.
شاید متوجه شده باشید که این دو ویژگی کلمه «snap» را در خود ندارند. This is intentional as they actually modify the box for all relevant
scroll operations and are not just scroll snapping. برای مثال، Chrome
آن‌ها را هنگام محاسبه اندازه صفحه برای عملیات پیمایش صفحه‌بندی مانند
PageDown و PageUp، و همچنین هنگام محاسبه مقدار پیمایش برای
عملیات Element.scrollIntoView() درنظر می‌گیرد.
تعامل با دیگر میاناهای برنامه‌سازی کاربردی پیمایش
DOM Scrolling API
میزان کردن پیمایش پس‌از همه عملیات پیمایش، ازجمله عملیاتی که توسط متن شروع شده‌اند، اتفاق می‌افتد. وقتی از میاناهای برنامه‌سازی کاربردی مانند Element.scrollTo استفاده می‌کنید،
مرورگر موقعیت پیمایش موردنظر عملیات را محاسبه می‌کند، سپس
منطق چسباندن مناسب را برای یافتن مکان چسبانده‌شده نهایی اعمال می‌کند. بنابراین، نیازی نیست اسکریپت کاربر محاسبات دستی برای چسباندن انجام دهد.
پیمایش روان
پیمایش روان رفتار عملیات پیمایش برنامه‌ای را کنترل می‌کند، درحالی‌که میزان کردن پیمایش مقصد آن را تعیین می‌کند. ازآنجایی‌که آن‌ها جنبه‌های متعامد پیمایش را کنترل می‌کنند، می‌توانند باهم استفاده شوند و یکدیگر را تکمیل کنند.
رفتار پیمایش بیش‌ازحد
Overscroll behavior API نحوه زنجیره‌ای شدن پیمایش در چندین عنصر را کنترل می‌کند و تحت‌تأثیر میزان کردن پیمایش قرار نمی‌گیرد.
هشدارها و روال‌های مطلوب
وقتی عناصر هدف فاصله زیادی از هم دارند، از چسباندن اجباری استفاده نکنید. این کار می‌تواند باعث شود محتوای بین موقعیت‌های چسبیدن غیرقابل‌دسترس شود.
در بسیاری از موارد، میزان کردن پیمایش را می‌توان به‌عنوان بهبود اضافه کرد
بدون اینکه نیاز به تشخیص ویژگی باشد.
درصورت نیاز، از @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
}
فرض نکنید که میاناهای برنامه‌سازی کاربردی پیمایش برنامه‌نویسی‌شده مثل Element.scrollTo
همیشه در آفست پیمایش درخواست‌شده به‌پایان می‌رسند. میزان کردن پیمایش ممکن است
پس‌از تکمیل پیمایش برنامه‌ای، جابه‌جایی پیمایش را تنظیم کند. توجه داشته باشید که این فرض حتی قبل‌از میزان کردن پیمایش هم فرض خوبی نبود، زیرا پیمایش ممکن است به دلایل دیگری قطع شده باشد، اما این موضوع به‌ویژه در مورد میزان کردن پیمایش صدق می‌کند.
کارهای آینده
تجربه پیمایش تمرکز اصلی
نظرسنجی اخیر تیم Chrome بود.
نتایج نظرسنجی چندین حوزه را شناسایی کرد که برای کاهش فاصله بین کتابخانه‌های افزایه و CSS به کار بیشتری نیاز دارند.
کارهای آتی بر scroll-snap تمرکز خواهد داشت، ازجمله:
- دردسترس بودن و سازگاری میانای برنامه‌سازی کاربردی در مرورگرها.
- کار روی
CSS APIهای جدید مثل
scroll-start. - کار روی
رویدادهای جدید JS مثل
snapChanged().