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

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

Adam Argyle

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

আগে

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

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

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

পরে

document.onscrollend = event => {…}

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

ব্রাউজার সমর্থন

• 114
• 114
• 109
• x

উৎস

এটা চেষ্টা করুন!

ঘটনা বিবরণ

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

একটি দৃশ্যকল্প কল্পনা করুন যেমন একটি ব্যবহারকারী একটি ইমেল দূরে সোয়াইপ. তারা সোয়াইপ করা শেষ করার পরে তারা যেখানে স্ক্রোল করেছে তার উপর ভিত্তি করে আপনি কাজটি সম্পাদন করতে পারেন।

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

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

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