ডিফল্টরূপে দ্রুত চাকা স্ক্রলিং করা

সাহেল শরিফী
Sahel Sharify

wheel স্ক্রলিং/জুমিং পারফরম্যান্স উন্নত করতে, ডেভেলপারদের wheel এবং mousewheel ইভেন্ট শ্রোতাদেরকে প্যাসিভ হিসাবে নিবন্ধন করার জন্য উৎসাহিত করা হয় {passive: true} বিকল্পটি addEventListener() করার জন্য। ইভেন্ট শ্রোতাদের প্যাসিভ হিসাবে নিবন্ধন করা ব্রাউজারকে বলে যে হুইল শ্রোতারা preventDefault() কল করবে না এবং ব্রাউজার শ্রোতাদের ব্লক না করে নিরাপদে স্ক্রলিং এবং জুমিং করতে পারে।

সমস্যাটি হল যে প্রায়শই হুইল ইভেন্ট শ্রোতারা ধারণাগতভাবে প্যাসিভ থাকে (কোন preventDefault() ) কিন্তু স্পষ্টভাবে নির্দিষ্ট করা হয় না, তাই ব্রাউজারকে অপেক্ষা করা সত্ত্বেও স্ক্রলিং/জুমিং শুরু করার আগে JS ইভেন্ট হ্যান্ডলিং শেষ হওয়ার জন্য অপেক্ষা করতে হবে। প্রয়োজন হয় না. Chrome 56-এ, আমরা touchstart এবং touchmove এর জন্য এই সমস্যাটির সমাধান করেছি , এবং সেই পরিবর্তনটি পরে Safari এবং Firefox উভয়ই গ্রহণ করেছে। আপনি সেই সময়ে তৈরি করা প্রদর্শনী ভিডিও থেকে দেখতে পাচ্ছেন, আচরণটি ত্যাগ করার কারণে এটি স্ক্রোল প্রতিক্রিয়াতে একটি লক্ষণীয় বিলম্ব তৈরি হয়েছিল। এখন Chrome 73-এ, আমরা wheel এবং mousewheel ইভেন্টগুলিতে একই হস্তক্ষেপ প্রয়োগ করেছি।

হস্তক্ষেপ

এই পরিবর্তনের সাথে আমাদের লক্ষ্য হল ব্যবহারকারীর কোড পরিবর্তন করার প্রয়োজন ছাড়াই ব্যবহারকারী চাকা বা টাচপ্যাড দিয়ে স্ক্রোল করা শুরু করার পরে ডিসপ্লে আপডেট করতে যে সময় লাগে তা কমিয়ে আনা। আমাদের মেট্রিক্স দেখায় যে 75% wheel এবং mousewheel ইভেন্ট শ্রোতা যারা রুট টার্গেটে নিবন্ধিত (উইন্ডো, নথি বা বডি) প্যাসিভ বিকল্পের জন্য কোন মান নির্দিষ্ট করে না এবং এই ধরনের 98% এর বেশি শ্রোতা preventDefault() কল করে না . Chrome 73-এ, আমরা রুট টার্গেটে (উইন্ডো, ডকুমেন্ট বা বডি) নিবন্ধিত wheel এবং mousewheel শ্রোতাদের ডিফল্টরূপে প্যাসিভ করার জন্য পরিবর্তন করছি। এর মানে হল একটি ইভেন্ট শ্রোতা পছন্দ করে:

window.addEventListener("wheel", func);

এর সমতুল্য হয়ে ওঠে:

window.addEventListener("wheel", func, {passive: true});

এবং শ্রোতার অভ্যন্তরে preventDefault() কল করা নিম্নলিখিত DevTools সতর্কতার সাথে উপেক্ষা করা হবে:

[Intervention] Unable to preventDefault inside passive event listener due
to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312

ব্রেকেজ এবং গাইডেন্স

বেশিরভাগ ক্ষেত্রে, কোন ভাঙ্গন পরিলক্ষিত হবে না। শুধুমাত্র বিরল ক্ষেত্রে (আমাদের মেট্রিক্স অনুসারে 0.3% পৃষ্ঠার কম), অনিচ্ছাকৃত স্ক্রোলিং/জুমিং ঘটতে পারে শ্রোতাদের অভ্যন্তরে preventDefault() কল উপেক্ষা করার কারণে যা ডিফল্টরূপে প্যাসিভ হিসাবে বিবেচিত হয়। আপনার অ্যাপ্লিকেশানটি নির্ধারণ করতে পারে যে এটি বন্যভাবে এটিকে আঘাত করতে পারে কিনা তা পরীক্ষা করে preventDefault() কল করার defaultPrevented সম্পত্তির মাধ্যমে কোনো প্রভাব আছে কিনা। প্রভাবিত ক্ষেত্রে সমাধান তুলনামূলকভাবে সহজ: ডিফল্ট আচরণ ওভাররাইড করতে addEventListener(){passive: false} পাস করুন এবং ইভেন্ট লিসেনারকে ব্লকিং হিসাবে সংরক্ষণ করুন।