জাভাস্ক্রিপ্ট দিয়ে ইউজার পেজের নিচে স্ক্রোল করলো ডিটেক্ট করা

র RAW জাভাস্ক্রিপ্ট দিয়ে ইউজার কখন পেজের নিচে স্ক্রোল করে পৌঁছেছে তা ডিটেক্ট করার পদ্ধতি শিখুন।

কখনো কখনো আপনি একটি ইভেন্ট ট্রিগার করতে চান, যখন ইউজার একটি পেজ বা নির্দিষ্ট সেকশনের নিচে স্ক্রোল করে পৌঁছেছে।

স্ক্রোল-টু-বটম ডিটেকশন (সকল আধুনিক ব্রাউজারে কাজ করে, IE9 এবং উপরে)

window.onscroll = function() { if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) { alert("At the bottom!") } }

এজ কেস সমাধান:

যদি প্রথমটি কাজ না করে, তবে window.pageYOffset-এ Math.ceil() মেথড ব্যবহার করুন:

window.onscroll = function() { if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) { alert('At the bottom!') } }

Math.ceil ব্যবহার করার কারণ হলো কিছু ব্রাউজার এলিমেন্টে সাবপিক্সেল প্রিসিশন ব্যবহার করে। যেমনঃ প্রস্থ বা উচ্চতা হতে পারে 500.25px।

Math.ceil আপওয়ার্ড রাউন্ড করে, যেমনঃ 1.45px হয় 2px।

কিছু ম্যাক কম্পিউটারের সাথে একটি সমস্যা আছে, যা উইন্ডো হাইটকে 1px অফসেট করে। এর সাইডস্টেপ করার জন্য আপনি ডকুমেন্ট হাইট থেকে কিছু পিক্সেল বিয়োগ করতে পারেন:

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

নোট: scrollY প্রায়শই pageYOffset-র পরিবর্তে ব্যবহার হয়। কিন্তু scrollY ইন্টারনেট এক্সপ্লোরারে কাজ করে না। আধুনিক ক্রস-ব্রাউজার কম্প্যাটিবিলিটির জন্য pageYOffset ব্যবহার করুন।

এখানে একটি CodePen দেওয়া আছে যা ওয়ার্কিং উদাহরণ দেখাচ্ছে।

আপনি যদি window.innerHeight, window.pageYOffset, এবং document.body.offsetHeight-র সম্পর্কে বিভ্রান্ত হন, তবে এখানে একটি ছোট হেল্পার ফাংশন আছে যা স্ক্রোল করার সময় প্রতিটি পিক্সেল ভ্যালু লগ করে:

window.onscroll = function() { console.log('Window height (px):', window.innerHeight) console.log('Currently scrolled from top (px):', window.pageYOffset) console.log('Document height(px):', document.body.offsetHeight) }

এটি আপনাকে স্ক্রোল ডিটেকশন ফাংশনটি কীভাবে কাজ করে তা বুঝতে সহজ করবে। প্রাথমিকভাবে pageYOffset আমাকে বিভ্রান্ত করেছিল। এটি বোঝায় উপ থেকে বর্তমান স্ক্রোল করা ভার্টিকাল পিক্সেল সংখ্যা।