پست اسکرول‌ صفحات روی موبایل اگه کلی event listener مثل touchstart و wheel داشته باشه، راحت لگ می‌زنه. یه ترفند ساده توی جاو…

اسکرول‌ صفحات روی موبایل اگه کلی event listener مثل touchstart و wheel داشته باشه، راحت لگ می‌زنه. یه ترفند ساده توی جاوااسکریپت کمک می‌کنه این مشکل خیلی کمتر بشه: استفاده از passive event listener ✅ به طور پیش‌فرض، مرورگر مجبور می‌شه صبر کنه ببینه توی handler از event.preventDefault() استفاده می‌کنی یا نه؛ همین مکث، اسکرول رو کند می‌کنه. اگه به مرورگر بگی این listener «passive» هست، دیگه صبر نمی‌کنه و اسکرول رو روان انجام می‌ده. 🚀 // همیشه قبل از استفاده، پشتیبانی رو چک کن const passiveIfSupported = (() => { let passive = false; try { const opts = Object.defineProperty({}, 'passive', { get() { passive = { passive: true }; } }); window.addEventListener('test', null, opts); } catch (e) {} return passive; })(); window.addEventListener('scroll', handleScroll, passiveIfSupported); function handleScroll(e) { // اینجا از e.preventDefault() استفاده نشه } هر جا فقط می‌خوای event رو بخونی و قصد preventDefault() نداری (مثل analytics روی اسکرول یا لمس)، استفاده از گزینه { passive: true } هم UX رو بهتر می‌کنه هم performance رو. ✨ مرجع: MDN - Passive event listeners 🔖 #Web #وب #Frontend #Backend #JavaScript #Performance #Frontend #Scroll #Event_Listener 👤 Developix 💎 Channel: @DevelopixWeb