मैं 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सभी परिस्थितियों में काम करने के लिए कुछ सहिष्णुता (कहना ) चाहिए । देखें stackoverflow.com/questions/5828275/...
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');
}
});