Scrollend, একটি নতুন জাভাস্ক্রিপ্ট ইভেন্ট

আপনার টাইমআউট ফাংশন মুছে দিন এবং সেগুলির বাগ থেকে মুক্তি পান, এখানে এমন ইভেন্ট রয়েছে যা আপনার সত্যিই প্রয়োজন: scrollend.

Adam Argyle

scrollend ইভেন্টের আগে, স্ক্রল সম্পূর্ণ হয়েছে কিনা তা শনাক্ত করার কোনও নির্ভরযোগ্য উপায় ছিল না। এর অর্থ হল, ইভেন্ট দেরিতে বা ব্যবহারকারীর আঙুল স্ক্রিনে থাকা অবস্থাতেই ফায়ার হবে। স্ক্রল করা কখন শেষ হয়েছে তা সঠিকভাবে না জানার কারণে সমস্যা হয় এবং ব্যবহারকারীর অভিজ্ঞতা খারাপ হয়।

আগে

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

এই setTimeout() স্ট্র্যাটেজি সবচেয়ে ভাল যা করতে পারে তা হল 100ms-এর জন্য স্ক্রল করা বন্ধ হয়ে গেছে কিনা তা জানা। এর ফলে, এটি স্ক্রল শেষ হওয়ার ইভেন্টের পরিবর্তে স্ক্রল পজ হওয়ার ইভেন্টের মতো দেখায়।

scrollend ইভেন্টের পরে, ব্রাউজার আপনার জন্য এই সমস্ত কঠিন মূল্যায়ন করে।

পরে

document.onscrollend = event => {…}

এটা একটা ভালো জিনিস। নিখুঁত টাইমিং এবং নির্গমনের আগে অর্থপূর্ণ শর্তে ভরপুর।

Browser Support

• 114
• 114
• 109
• 26.2

Source

এটি ব্যবহার করে দেখুন!

ইভেন্টের বিবরণ

scrollend ইভেন্ট তখনই ফায়ার হয় যখন: - ব্রাউজার আর অ্যানিমেট বা স্ক্রল ট্রান্সলেট করছে না। - ব্যবহারকারী টাচ করা বন্ধ করেছেন। - ব্যবহারকারীর পয়েন্টার স্ক্রল থাম্ব রিলিজ করেছে। - ব্যবহারকারী 'কী' প্রেস করা বন্ধ করেছেন। - ফ্র্যাগমেন্টে স্ক্রল করা সম্পূর্ণ হয়েছে। - স্ক্রল স্ন্যাপ সম্পূর্ণ হয়েছে। - scrollTo() সম্পূর্ণ হয়েছে। - ব্যবহারকারী ভিজ্যুয়াল ভিউপোর্ট স্ক্রল করেছেন।

scrollend ইভেন্ট ট্রিগার হয় না যখন: - ব্যবহারকারীর জেসচারের ফলে স্ক্রল পজিশনে কোনও পরিবর্তন হয় না (কোনও ট্রান্সলেশন হয় না)। - scrollTo()-এর কোনও অনুবাদ করা হয়নি।

এই ইভেন্টটি ওয়েব প্ল্যাটফর্মে আসতে এত সময় নেওয়ার একটি কারণ হল অনেক ছোট ছোট বিবরণ যার জন্য নির্দিষ্ট বিবরণের প্রয়োজন ছিল। সবচেয়ে জটিল ক্ষেত্রগুলির মধ্যে একটি হল ভিজ্যুয়াল ভিউপোর্ট বনাম ডকুমেন্টের জন্য scrollend-এর বিবরণ স্পষ্টভাবে প্রকাশ করা। আপনি জুম ইন করেছেন এমন একটি ওয়েবপেজের কথা বিবেচনা করুন। জুম করা অবস্থায় আপনি স্ক্রল করতে পারবেন এবং এর অর্থ এই নয় যে ডকুমেন্ট স্ক্রল করতে হবে। নিশ্চিত থাকুন যে এই ভিজ্যুয়াল ভিউপোর্ট ব্যবহারকারী-চালিত স্ক্রল ইন্টার‍্যাকশন সম্পূর্ণ হওয়ার পরে scrollend ইভেন্ট নির্গত করবে।

ইভেন্ট ব্যবহার করে

অন্যান্য স্ক্রল ইভেন্টের মতো, আপনি দু'টি উপায়ে শ্রোতাদের রেজিস্টার করতে পারবেন।

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

aScrollingElement.addEventListener("scroll>end", (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 ইভেন্ট উপলভ্য হলে, প্রোগ্রেসিভ এনহ্যান্সমেন্টের মাধ্যমে সেটি উন্নত করার জন্য এটি একটি ভালো শুরু। আপনি একটি পলিফিল (NPM) ব্যবহার করে দেখতে পারেন যা আমি তৈরি করেছি এবং এটি ব্রাউজারের পক্ষে যতটা সম্ভব ভাল কাজ করে:

import {scrollend} from "scrollyfills"

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

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

যেসব ক্ষেত্রে ব্যবহার করা যাবে

স্ক্রল করার সময় কম্পিউটেশনাল ভারী কাজ এড়িয়ে চলা ভালো অভ্যাস। এই প্র্যাক্টিস নিশ্চিত করে যে স্ক্রলিং অভিজ্ঞতা মসৃণ রাখতে যতটা সম্ভব মেমরি এবং প্রসেসিং ব্যবহার করতে পারে। scrollend ইভেন্ট ব্যবহার করলে কল আউট করার এবং কঠোর পরিশ্রম করার জন্য উপযুক্ত সময় পাওয়া যায়, কারণ স্ক্রোলিং আর হচ্ছে না।

scrollend ইভেন্টটি বিভিন্ন অ্যাকশন ট্রিগার করতে ব্যবহার করা যেতে পারে। একটি সাধারণ ব্যবহারিক তথ্য হল স্ক্রল যেখানে থেমেছে সেই পজিশনের সাথে সম্পর্কিত UI এলিমেন্ট সিঙ্ক করা। যেমন: - ডট ইন্ডিকেটরের সাহায্যে ক্যারোজেল স্ক্রল পজিশন সিঙ্ক করা। - মেটা ডেটার সাথে গ্যালারি আইটেম সিঙ্ক করা। - ব্যবহারকারী নতুন ট্যাবে স্ক্রল করার পরে ডেটা ফেচ করা।

এমন একটি পরিস্থিতি কল্পনা করুন যেখানে ব্যবহারকারী কোনও ইমেল সোয়াইপ করে সরিয়ে দিচ্ছেন। তিনি সোয়াইপ করা শেষ করলে, তিনি যেখানে স্ক্রল করেছেন তার উপর ভিত্তি করে আপনি অ্যাকশনটি করতে পারবেন।

এছাড়াও, আপনি এই ইভেন্টটি প্রোগ্রাম্যাটিক বা ব্যবহারকারীর স্ক্রল করার পরে সিঙ্ক করার জন্য অথবা লগিং অ্যানালিটিক্সের মতো অ্যাকশনের জন্য ব্যবহার করতে পারেন।

এখানে একটি ভালো উদাহরণ দেওয়া হল যেখানে স্ক্রল পজিশনের উপর ভিত্তি করে তীরচিহ্ন, ডট ও ফোকাসের মতো একাধিক এলিমেন্ট আপডেট করতে হবে। YouTube-এ আমি কীভাবে এই ক্যারোজেল তৈরি করেছি তা দেখুন। এছাড়াও, লাইভ ডেমো ব্যবহার করে দেখুন।

এই বিষয়ে ইঞ্জিনিয়ারিংয়ের কাজ করার জন্য মেহেদি কাজেমী এবং API ও প্রয়োগ সংক্রান্ত নির্দেশনার জন্য রবার্ট ফ্ল্যাক-কে ধন্যবাদ।