উল্লম্ব স্ক্রোলবারের সাথে কোনও ডিভিটি নীচে পুরোপুরি স্ক্রল করা থাকলে, jQuery বা অন্য কোনও জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার না করে আমি কীভাবে নির্ধারণ করব?
আমার প্রশ্নটি কীভাবে নীচে স্ক্রোল করবেন তা নয়। আমি জানি যে কিভাবে করতে। আমি ডিভিটি ইতিমধ্যে নীচে স্ক্রোল করা হয়েছে কিনা তা নির্ধারণ করতে চাই।
এটা কাজ করে না:
if (objDiv.scrollTop == objDiv.scrollHeight)
উত্তর:
আপনি ব্যবহার খুব কাছাকাছি scrollTop == scrollHeight।
scrollTop স্ক্রোল অবস্থানের শীর্ষকে বোঝায়, যা হবে scrollHeight - offsetHeight
আপনার যদি বিবৃতিটি দেখতে এমন হয় (ট্রিপল সমান ব্যবহার করতে ভুলবেন না):
if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight))
{
}
সম্পাদনা: আমার উত্তর সংশোধন করা হয়েছে, সম্পূর্ণ ভুল ছিল
scrollTopঅ-অবিচ্ছেদ্য হতে পারে, সুতরাং এর জন্য obj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1সমস্ত পরিস্থিতিতে কাজ করার জন্য কিছুটা সহনশীলতা প্রয়োজন (বলুন )। স্ট্যাকওভারফ্লো.com
document.body.scrollHeightসমানdocument.body.offsetHeight
সীমানা, অনুভূমিক স্ক্রোলবার এবং / অথবা ভাসমান পিক্সেল গণনার মতো বিষয়গুলিকে অ্যাকাউন্টে নেওয়ার সময় সঠিক ফলাফল পাওয়ার জন্য, আপনার ব্যবহার করা উচিত ...
el.scrollHeight - el.scrollTop - el.clientHeight < 1
দ্রষ্টব্য: আপনি যদি সঠিক ফলাফল পেতে চান তবে আপনাকে অফসেটহাইটের পরিবর্তে ক্লায়েন্টহাইট ব্যবহার করতে হবে। অফসেটহাইটটি তখনই আপনাকে সঠিক ফলাফল দেয় যখন এল এর কোন সীমানা বা অনুভূমিক স্ক্রোলবার না থাকে
@scroll="scrolling"scrolling(event) { event.target // as el in the answer }
এই পার্টিতে কিছুটা দেরি হলেও, উপরোক্ত উত্তরগুলির মধ্যে কোনওটিই বিশেষত খুব ভাল কাজ করছে বলে মনে হয় না ...
সমস্ত ইভেন্টের জন্য সামঞ্জস্য করার জন্য, আপনাকে গণনা করা স্ক্রোল অবস্থানটি গোল করতে হবে:
Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight
কোনও উপাদান যদি এর স্ক্রোলের শেষে থাকে তবে সত্য হয়, যদি তা না হয় তবে তা মিথ্যা।
element.scrollHeight - element.scrollTop === element.clientHeight
document.body.scrollHeightএবং document.bodyclientHeightএকই মান আছে এবং তাই এক্সপ্রেশন কখনও সত্য হয় না।
<!DOCTYPE HTML>
<html>
<head>
<title>JQuery | Detecting when user scrolls to bottom of div.
</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
Data Center
</h1>
<p id="data_center" style="font-size: 17px; font-weight: bold;"></p>
<center>
<div class="div" style="width:200px; height:150px; overflow:auto;">
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
<h1>Hello Friends</h1>
</div>
</center>
<script>
$('#data_center').text('Scroll till bottom to get alert!');
jQuery(function($) {
$('.div').on('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('End of DIV has reached!');
}
});
});
</script>
</body>
</html>
এটি আমার পক্ষে কাজ করে, আমি আশা করি, এটি আপনাকেও সহায়তা করবে। ধন্যবাদ
ভাল, আমি নিজেকে একই জিজ্ঞাসা করেছি, এবং আমি এইভাবে খুঁজে পেয়েছি, এখানে আমি একটি ইভেন্ট ব্যবহার করে একটি উদাহরণ রেখেছি:
let scrollableElement = document.querySelector(".elementScrollable")
scrollableElement.addEventListener("scroll",function(event){
if(event.target.scrollTop === event.target.scrollTopMax){
console.log("The scroll arrived at bottom")
}
})
এই আমার জন্য কাজ করে। সামান্য একটি ভিন্ন পদ্ধতির।
if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
return 'scrollOnTheBottom';
}
Https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/ এ আমি যে সমাধানটি পেয়েছি তা আশা করি এটি আপনার পক্ষেও কার্যকর হবে ।
$(window).on('scroll', function() {
if ($(window).scrollTop() >= $(
'.div').offset().top + $('.div').
outerHeight() - window.innerHeight) {
alert('You reached the end of the DIV');
}
});