اسکرولند، یک رویداد جدید جاوا اسکریپت

توابع تایم اوت خود را حذف کنید و اشکالات آنها را از بین ببرید، این رویدادی است که واقعاً به آن نیاز دارید: اسکرول.

Adam Argyle

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

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

بهترین کاری که این استراتژی setTimeout() می تواند انجام دهد این است که بفهمد اسکرول برای 100ms متوقف شده است یا خیر. این باعث می‌شود که بیشتر شبیه یک رویداد پیمایش شده باشد، نه یک رویداد پایان یافته است.

پس از رویداد scrollend ، مرورگر این همه ارزیابی دشوار را برای شما انجام می دهد.

document.onscrollend = event => {…}

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

آن را امتحان کنید!

جزئیات رویداد

رویداد scrollend زمانی فعال می شود که: - مرورگر دیگر پیمایش را متحرک یا ترجمه نمی کند. - لمس کاربر آزاد شده است. - نشانگر کاربر انگشت شست اسکرول را آزاد کرده است. - فشار کلید کاربر آزاد شده است. - اسکرول به قطعه کامل شده است. - اسکرول اسنپ کامل شده است. - scrollTo() تکمیل شد. - کاربر نمای بصری را اسکرول کرده است.

رویداد scrollend زمانی فعال نمی‌شود که: - حرکت کاربر منجر به تغییر موقعیت اسکرول نشده است (ترجمه‌ای رخ نداده است). - scrollTo() به هیچ ترجمه ای منجر نشد.

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

با استفاده از رویداد

مانند سایر رویدادهای اسکرول، می توانید شنوندگان را به چند روش ثبت کنید.

addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});

یا از ویژگی رویداد استفاده کنید:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

Polyfills و افزایش تدریجی

اگر اکنون به دنبال استفاده از این رویداد جدید هستید، بهترین توصیه ما در اینجاست. می‌توانید به استفاده از استراتژی پایان اسکرول فعلی خود (اگر دارید) ادامه دهید و در ابتدای آن پشتیبانی را با موارد زیر بررسی کنید:

'onscrollend' in window
// true, if available

بسته به اینکه مرورگر رویداد را ارائه دهد، درست یا نادرست گزارش می‌شود. با این چک می توانید کد زیر را منشعب کنید:

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll = event => {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

این یک شروع سالم برای افزایش تدریجی رویداد scrollend شما در صورت در دسترس بودن است. همچنین می‌توانید یک polyfill ( NPM ) را که من ساخته‌ام امتحان کنید که بهترین عملکرد را برای مرورگر انجام می‌دهد:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

در صورت وجود، polyfill به تدریج برای استفاده از رویداد scrollend مرورگر افزایش می یابد. اگر در دسترس نباشد، اسکریپت رویدادهای اشاره گر را تماشا می کند و برای انجام بهترین تخمین از پایان رویداد، پیمایش می کند.

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

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

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

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

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

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

با تشکر از مهدی کاظمی برای کار مهندسی در این زمینه و رابرت فلک برای API و راهنمایی پیاده سازی.