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

آدام آرگیل
Adam Argyle
X GitHub

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

پشتیبانی مرورگر

  • کروم: 129.
  • لبه: 129.
  • فایرفاکس: پشتیبانی نمی شود.
  • سافاری: پشتیبانی نمی شود.

منبع

پشتیبانی مرورگر

  • کروم: 129.
  • لبه: 129.
  • فایرفاکس: پشتیبانی نمی شود.
  • سافاری: پشتیبانی نمی شود.

منبع

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

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

یک اسکرول افقی با جعبه های شماره گذاری شده در داخل به عنوان اهداف ضربه ای نشان داده شده است. در سمت چپ یک گزارش زمان واقعی از رویدادهای scrollSnapChange است که snapTargetInline را با رنگ آبی برجسته می کند. در سمت راست یک گزارش زمان واقعی از رویدادهای scrollSnapChanging است که snapTargetInline را با خاکستری برجسته می کند.

آن را امتحان کنید
https://codepen.io/web-dot-dev/pen/jOjaaEP

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

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')
}
https://codepen.io/web-dot-dev/pen/dyBZZPe

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

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

Snap Changing
https://codepen.io/web-dot-dev/pen/wvLPPBL

Snap Change
https://codepen.io/web-dot-dev/pen/QWXOObw

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

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

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})
https://codepen.io/web-dot-dev/pen/rNEYYVj

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

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

شبکه ای از مربع ها در یک اسکرول افقی و عمودی نشان داده شده است. مرز چین نشان دهنده هدف scrollSnapChanging و حاشیه جامد هدف scrollSnapChange است. قرمز نشان دهنده snapTargetInline و آبی نشان دهنده snapTargetBlock است.

https://codepen.io/web-dot-dev/pen/qBzVVdp

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

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

https://codepen.io/web-dot-dev/pen/YzoEEXj

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

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

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

https://codepen.io/web-dot-dev/pen/OJeOOVG

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

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

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

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}
https://codepen.io/web-dot-dev/pen/MWMOOae

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

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

https://codepen.io/web-dot-dev/pen/LYKOOpd

جریان پوششی

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

https://codepen.io/web-dot-dev/pen/Bagmmog

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

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

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

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

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

منابع: