জাভাস্ক্রিপ্ট সহ একটি পৃষ্ঠার নীচে স্ক্রোল করা ব্যবহারকারী কখন সনাক্ত করবেন

অপরিশোধিত জাভাস্ক্রিপ্ট সহ একজন ব্যবহারকারী পৃষ্ঠার নীচের দিকে স্ক্রোল করলে কীভাবে শনাক্ত করবেন তা শিখুন।

কখনও কখনও আপনি একটি ইভেন্ট ট্রিগার করতে চান, যখন ব্যবহারকারী একটি পৃষ্ঠার নীচে বা একটি নির্দিষ্ট বিভাগে স্ক্রোল করেন৷

নিচে সনাক্তকরণে স্ক্রোল করুন (সমস্ত আধুনিক ব্রাউজারে কাজ করে, IE9 এবং উপরে)

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

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

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

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 ব্যবহার করুন .

এখানে একটি কোডপেন একটি কার্যকর উদাহরণ দেখাচ্ছে৷৷

আপনি যদি 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 আমাকে বিভ্রান্ত এটি বর্তমান এর সংখ্যা নির্দেশ করে৷ পিক্সেলগুলি উপরে থেকে উল্লম্বভাবে স্ক্রোল করা হয়েছে৷