رویدادهای اسنپ را اسکرول کنید

Adam Argyle

از Chrome 129 می‌توانید از رویدادهای scrollSnapChange و scrollSnapChanging از جاوا اسکریپت استفاده کنید. با پیاده‌سازی رویدادهای اسنپ داخلی، حالت اسنپ نامرئی قبلی، در زمان مناسب و همیشه درست می‌شود. بدون این رویدادها این راحتی برای شما نیست.

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

با این حال، قبل از scrollSnapChanging ، دانستن اینکه چه زمانی هدف اسنپ در حال تغییر است یا به چه چیزی تغییر می‌کند (مانند یک اسکرول پرتاب) غیرممکن بود.

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

scrollSnapChange

این رویداد فقط در صورتی اجرا می‌شود که یک حرکت حرکتی منجر به قرار گرفتن یک هدف جدید و به ترتیب زیر شده باشد.

1. پس از استراحت اسکرول.
2. قبل از scrollend .

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

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

رویداد، آیتم snap شده را روی شی رویداد به‌عنوان snapTargetBlock و snapTargetInline نمایش می‌دهد. اگر اسکرول فقط افقی باشد، ویژگی snapTargetBlock null خواهد بود. مقدار ویژگی گره عنصر خواهد بود.

جزئیات منحصر به فرد برای scrollSnapChange

تا زمانی که کاربر ژست خود را رها نکند فعال نمی شود

انگشتی که هنوز روی صفحه است یا انگشتان روی صفحه ترک نشان می‌دهند که حرکت کاربر پیمایش تمام نشده است، به این معنی که پیمایش به پایان نرسیده است، به این معنی که هدف ضربه محکم و ناگهانی هنوز تغییر نکرده است، در انتظار یک ژست کامل کاربر است.

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

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

scrollSnapChanging

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

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

رویداد، آیتم snap شده را روی شی رویداد به‌عنوان snapTargetBlock و snapTargetInline نمایش می‌دهد. اگر اسکرول فقط عمودی باشد، ویژگی snapTargetInline null خواهد بود. مقدار ویژگی گره عنصر خواهد بود.

جزئیات منحصر به فرد برای scrollSnapChanging

زود و اغلب در حین حرکت حرکتی شلیک می شود

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

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

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

از موارد و مثال استفاده کنید

این رویدادها بسیاری از موارد استفاده جدید را امکان پذیر می کند و در عین حال اجرای الگوهای فعلی را بسیار آسان تر می کند. یکی از مثال‌های بارز فعال کردن انیمیشن‌های snap triggered است. نشان دادن متنی آیتم snap، فرزندان آیتم Snap یا اطلاعات مرتبط زمانی که آن مورد ضربه محکم و ناگهانی است.

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

یک گواهی را برجسته کنید

این مثال گواهینامه برداشته شده را ترویج یا به صورت بصری متمرکز می کند.

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}

نشان دادن شرح مورد عکس‌برداری شده

این مثال شرح مورد عکس را نشان می دهد. هر دو رویداد در این نسخه نمایشی گنجانده شده‌اند، بنابراین می‌توانید تفاوت‌های زمان‌بندی و تجربه کاربر بین scrollSnapChange و scrollSnapChanging را مشاهده کنید.

یک بار انیمیشن، فرزندان یک اسلاید ارائه عکس

این مثال می‌داند که چه زمانی یک اسلاید جدید فرود آمده و روی آن استراحت داده شده است، که زمان بسیار خوبی برای یک بار انیمیشن کردن محتوا است.

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})

چسباندن هر دو x و y در یک اسکرول

اسکرول اسنپ برای اسکرول‌هایی کار می‌کند که اسکرول افقی و عمودی را امکان‌پذیر می‌کنند. این نسخه نمایشی هر دو هدف scrollSnapChanging و scrollSnapChange را در حین حرکت در اطراف شبکه نشان می دهد. این نسخه نمایشی نشان می‌دهد که چگونه عنصری که مرورگر به آن می‌چسبد ممکن است همیشه آن چیزی نباشد که شما فکر می‌کنید.

دو اسکرول متصل

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

انتخابگر رنگ OKLCH

این نسخه نمایشی دارای 3 اسکرول است که هر کدام یک کانال رنگی متفاوت را در OKLCH نشان می‌دهند. مورد برداشته شده با گروه رادیویی مربوطه همگام سازی می شود و داده ها را می توان از فرمی که ورودی ها را بسته بندی می کند، بازیابی کرد. به یک کاربر ماوس یا لمسی، می توانید به مقدار مورد نظر خود بروید. برای کاربران صفحه‌کلید، می‌توانید از کلیدهای جهت‌دار استفاده کنید. برای یک صفحه خوان، فقط یک فرم است.

گرفتن هاب های متحرک خیره کننده

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

پشتیبانی رویداد را با جاوا اسکریپت زیر بررسی کنید:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}

ورودی خط کش قابل پیمایش

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

جریان پوششی

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

ایده های بیشتری برای الهام بخشیدن به خلاقیت

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

• راه‌اندازی بارگذاری تنبل، که به‌عنوان رندر یا واکشی داده‌ها به‌عنوان snapchange شناخته می‌شود.
• ریز عکسهای نوار فیلم به یک تصویر بزرگتر پیوند داده شده است.
• تغییر وضعیت پخش/مکث برای یک تریلر ویدیویی برای یک تصویر کوچک ویدیویی.
• ردیابی تجزیه و تحلیل
• طومار نویسی
• Wheel of Fortune UI/UX
• Snap target یک راهنمای ابزار لنگردار دریافت می کند.
• برای گرفتن ضربه بزنید
• ضربه بزنید تا آشکار شود
• برای تلفن های موبایل در ضربه محکم و ناگهانی
• سوایپ UI
• برگه ها یا چرخ فلک های قابل کشیدن

مطالعات بیشتر

تیم Chrome از شنیدن آنچه با این APIهای جدید می‌سازید هیجان‌زده است و امیدوار است که به ساده‌سازی تجربیات قابل پیمایش شما کمک کند.

منابع:

• مشخصات CSS
• Snap Explainers را اسکرول کنید
• رویدادهای MDN Snap
• مجموعه CodePen