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

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

Adam Argyle

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

আগে

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

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

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

পরে

document.onscrollend = event => {…}

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

Browser Support

• 114
• 114
• 109
• 

Source

চেষ্টা করে দেখুন!

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

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
};

পলিফিল এবং প্রগতিশীল বর্ধন

আপনি যদি এখনই এই নতুন ইভেন্টটি ব্যবহার করতে চান, তাহলে আমাদের সেরা পরামর্শ এখানে। আপনি আপনার বর্তমান স্ক্রোল এন্ড কৌশল (যদি আপনার থাকে) ব্যবহার চালিয়ে যেতে পারেন এবং এর শুরুতে নিম্নলিখিত উপায়ে সমর্থন পরীক্ষা করতে পারেন:

'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 উপাদানগুলিকে সিঙ্ক্রোনাইজ করা। উদাহরণস্বরূপ: - একটি ক্যারোজেল স্ক্রোল অবস্থানকে একটি ডট ইন্ডিকেটরের সাথে সিঙ্ক করা। - একটি গ্যালারি আইটেমকে তার মেটা ডেটার সাথে সিঙ্ক করা। - একজন ব্যবহারকারী একটি নতুন ট্যাবে স্ক্রোল করার পরে ডেটা আনা।

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

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

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

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