Wie kann ich ohne Verwendung von jQuery oder einer anderen JavaScript-Bibliothek feststellen, ob ein Div mit einer vertikalen Bildlaufleiste ganz nach unten gescrollt wird?
Meine Frage ist nicht, wie man nach unten scrollen soll. Ich weiß, wie das geht. Ich möchte feststellen, ob das Div bereits nach unten gescrollt ist.
Das funktioniert nicht:
if (objDiv.scrollTop == objDiv.scrollHeight)
Antworten:
Du bist ziemlich nah dran scrollTop == scrollHeight.
scrollTop bezieht sich auf den oberen Rand der Bildlaufposition scrollHeight - offsetHeight
Ihre if-Anweisung sollte so aussehen (vergessen Sie nicht, Triple Equals zu verwenden):
if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight))
{
}
Edit: Meine Antwort wurde korrigiert, war völlig falsch
scrollTopkann nicht ganzzahlig sein, daher erfordert dies eine gewisse Toleranz (z. B. obj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1), um unter allen Umständen zu funktionieren. Siehe stackoverflow.com/questions/5828275/…
document.body.scrollHeightequals document.body.offsetHeightin meinem Fall (Chrom)
Um die richtigen Ergebnisse zu erzielen, wenn Sie Dinge wie die Möglichkeit eines Rahmens, einer horizontalen Bildlaufleiste und / oder einer schwebenden Pixelanzahl berücksichtigen, sollten Sie ...
el.scrollHeight - el.scrollTop - el.clientHeight < 1
HINWEIS: Sie MÜSSEN clientHeight anstelle von offsetHeight verwenden, wenn Sie die richtigen Ergebnisse erzielen möchten. offsetHeight liefert nur dann korrekte Ergebnisse, wenn el keinen Rand oder keine horizontale Bildlaufleiste hat
@scroll="scrolling"dann in den Methoden scrolling(event) { event.target // as el in the answer }Viel Glück
Wenig spät zu dieser Party, aber keine der oben genannten Antworten scheint besonders gut zu funktionieren, wenn ...
Um alle Eventualitäten zu berücksichtigen, müssen Sie die berechnete Bildlaufposition aufrunden:
Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight
Gibt true zurück, wenn sich ein Element am Ende seines Bildlaufs befindet, false, wenn dies nicht der Fall ist.
element.scrollHeight - element.scrollTop === element.clientHeight
document.body.scrollHeightund document.bodyclientHeighthaben den gleichen Wert und so ist der Ausdruck nie wahr.
<!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>
Es funktioniert bei mir, ich hoffe, das wird dir auch helfen. Vielen Dank.
Nun, ich habe mich das gleiche gefragt und diesen Weg gefunden. Hier habe ich ein Beispiel mit einem Ereignis gegeben:
let scrollableElement = document.querySelector(".elementScrollable")
scrollableElement.addEventListener("scroll",function(event){
if(event.target.scrollTop === event.target.scrollTopMax){
console.log("The scroll arrived at bottom")
}
})
Dieser arbeitet für mich. Etwas anders.
if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
return 'scrollOnTheBottom';
}
Die Lösung, die ich auf https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/ gefunden habe, hat für mich funktioniert, hoffe, dass sie auch für Sie funktioniert .
$(window).on('scroll', function() {
if ($(window).scrollTop() >= $(
'.div').offset().top + $('.div').
outerHeight() - window.innerHeight) {
alert('You reached the end of the DIV');
}
});