স্ক্রল শেষ না হওয়া পর্যন্ত কাজ স্থগিত রাখুন

ওয়েবে স্ক্রল করার সময় তা মসৃণ ও রেসপন্সিভ হতে হবে। স্ক্রল করার সময় লেআউট রিক্যালকুলেশন, অ্যানালিটিক্স ডেটা বিকন ট্র্যাকিং বা ডায়নামিক DOM আপডেটের মতো ভারী টাস্ক এক্সিকিউট করলে, তা মূল থ্রেডকে স্যাচুরেট করে দিতে পারে, যার ফলে ফ্রেম ড্রপ ও লেআউট থ্র্যাশিং হতে পারে।

ঐতিহাসিকভাবে, স্ক্রল কখন শেষ হবে তা অনুমান করার জন্য ডেভেলপাররা setTimeout() ব্যবহার করে scroll ইভেন্ট ডিবাউন্স করার উপর নির্ভর করেছেন। তবে, এই ডিবাউন্স করা ফাংশনগুলি কুখ্যাতভাবে অবিশ্বাস্য। ব্যবহারকারী স্ক্রল করার সময়ও এগুলি ট্রিগার হতে পারে।

scrollend ইভেন্ট অত্যন্ত নির্ভরযোগ্য, পারফর্ম্যান্স-ভিত্তিক সমাধান অফার করে। স্ক্রল করা বন্ধ হলে, সব ট্রানজিশন শেষ হলে এবং টাচ জেসচার রিলিজ করা হলে, ব্রাউজার ঠিক সেই মুহূর্তে scrollend ইভেন্ট ফায়ার করে।

কীভাবে প্রয়োগ করতে হয়

ডিফার-ওয়ার্ক প্যাটার্ন প্রয়োগ করতে:

1. স্ক্রল করা যায় এমন কন্টেনার সেট-আপ করা: overflow: auto বা overflow: scroll ব্যবহার করে কন্টেনার তৈরি করুন।
2. scroll ইভেন্টের জন্য শুনুন: শুধুমাত্র বেসিক ডায়নামিক মেট্রিক বা তথ্যপূর্ণ লেআউট স্টাইলিংয়ের জন্য এই লিসেনার ব্যবহার করুন। এখানে ভারী কাজ করবেন না।
3. scrollend ইভেন্টের জন্য শুনুন: স্ক্রল কন্টেনার বা ডকুমেন্টে scrollend কলব্যাক রেজিস্টার করুন।
4. কলব্যাকে এক্সপেনসিভ কাজ এক্সিকিউট করা: এটি হল সেই জায়গা যেখানে পরিবর্তনশীল কন্টেন্ট ফেচ করা বা কম্প্রিহেনসিভ DOM লেআউট ট্রিগার করা নিরাপদ।

কোডের উদাহরণ

.scroll-container {
  height: 300px;
  overflow-y: auto;
}

const scroller = document.querySelector('.scroll-container');

// 1. Informative feedback during scroll
scroller.addEventListener('scroll', () => {
  // Avoid dynamic heavier data updates here
  console.log('Scrolling dynamically... updates deferred');
});

// 2. Safe callback when scrolling rests
scroller.addEventListener('scrollend', () => {
  // Run layout recalculations or analytical beacons updates here
  const currentVisibleSection = findMostVisibleSection(scroller);
  fetchAdditionalData(currentVisibleSection);
});

স্ট্র্যাটেজিক প্রয়োগ ও পেশাদার পদ্ধতি

• লেআউট ডেটা বিকন ফায়ার করার সময় বা ডায়নামিকভাবে নতুন কন্টেন্ট লেআউট ফেচ করার সময় ডিবাউন্স করা scroll ইভেন্টের পরিবর্তে scrollend ব্যবহার করুন।
• আপনি ক্যারোজেল বা প্রশংসাপত্র গ্যালারি স্লাইড তৈরি করলে, এটি scrollSnapChange বা scrollSnapChanging স্ন্যাপ ইন্টার‍্যাকশনের সাথে পেয়ার করার কথা বিবেচনা করুন।
• ডায়নামিক ভিজ্যুয়াল স্ক্রল কলব্যাকের মধ্যে লেআউট-নির্ভর ডায়নামিক আপডেট বান্ডেল করবেন না।
• মনে রাখবেন যে ভিজ্যুয়াল ভিউপোর্ট জুম ও স্ক্রল করলে scrollend ইভেন্ট সঠিকভাবে ট্রিগার হয়।

ফলব্যাক স্ট্র্যাটেজি

কাজ করে না এমন ব্রাউজারের ক্ষেত্রে, কাস্টম scrollend ইভেন্ট ডিসপ্যাচ করতে setTimeout সহ ডিবাউন্স করা scroll ইভেন্টে ফিরে যান।

function initializeDemo() {
  const scroller = document.querySelector('#scroller');
  scroller.addEventListener('scrollend', () => {
    // Safe execution
  });
}

if ('onscrollend' in window) {
  initializeDemo();
} else {
  initializeDemo();
  const scroller = document.querySelector('#scroller');
  scroller.addEventListener('scroll', () => {
    clearTimeout(window.scrollendtimer);
    window.scrollendtimer = setTimeout(() => {
      scroller.dispatchEvent(new CustomEvent('scrollend'));
    }, 100);
  });
}