Jak określić, bez korzystania z jQuery lub innej biblioteki JavaScript, czy element DIV z pionowym paskiem przewijania jest przewijany do samego dołu?
Moje pytanie nie dotyczy tego, jak przewinąć do dołu. Wiem, jak to zrobić. Chcę sprawdzić, czy element DIV jest już przewinięty na sam dół.
To nie działa:
if (objDiv.scrollTop == objDiv.scrollHeight)
Odpowiedzi:
Jesteś całkiem blisko scrollTop == scrollHeight.
scrollTop odnosi się do górnej części pozycji przewijania, która będzie scrollHeight - offsetHeight
Twoje stwierdzenie if powinno wyglądać tak (nie zapomnij użyć potrójnych równych):
if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight))
{
}
Edycja: poprawiłem moją odpowiedź, była całkowicie błędna
scrollTopmoże być nieintegralna, więc wymaga to pewnej tolerancji (powiedzmy obj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1), aby działać w każdych okolicznościach. Zobacz stackoverflow.com/questions/5828275/…
document.body.scrollHeightrówna się document.body.offsetHeightw moim przypadku (Chrome)
Aby uzyskać prawidłowe wyniki, biorąc pod uwagę takie rzeczy, jak możliwość obramowania, poziomego paska przewijania i / lub liczby pływających pikseli, należy użyć ...
el.scrollHeight - el.scrollTop - el.clientHeight < 1
UWAGA: MUSISZ użyć parametru clientHeight zamiast offsetHeight, jeśli chcesz uzyskać prawidłowe wyniki. offsetHeight poda poprawne wyniki tylko wtedy, gdy el nie ma obramowania ani poziomego paska przewijania
@scroll="scrolling"a następnie w metodach scrolling(event) { event.target // as el in the answer }Powodzenia
Trochę późno na tę imprezę, ale żadna z powyższych odpowiedzi nie wydaje się działać szczególnie dobrze, gdy ...
Aby uwzględnić wszystkie ewentualności, musisz zaokrąglić w górę obliczoną pozycję przewijania:
Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight
Zwraca true, jeśli element znajduje się na końcu swojego przewijania, false, jeśli tak nie jest.
element.scrollHeight - element.scrollTop === element.clientHeight
document.body.scrollHeighti document.bodyclientHeightmają tę samą wartość, więc wyrażenie nigdy nie jest prawdziwe.
<!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>
U mnie to działa, mam nadzieję, że to również pomoże. Dzięki.
Cóż, zadałem sobie to samo pytanie i znalazłem w ten sposób, tutaj umieściłem przykład za pomocą zdarzenia:
let scrollableElement = document.querySelector(".elementScrollable")
scrollableElement.addEventListener("scroll",function(event){
if(event.target.scrollTop === event.target.scrollTopMax){
console.log("The scroll arrived at bottom")
}
})
Ten działa dla mnie. Nieco inne podejście.
if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
return 'scrollOnTheBottom';
}
Rozwiązanie, które znalazłem na https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/ Pracowało dla mnie, mam nadzieję, że zadziała również dla Ciebie .
$(window).on('scroll', function() {
if ($(window).scrollTop() >= $(
'.div').offset().top + $('.div').
outerHeight() - window.innerHeight) {
alert('You reached the end of the DIV');
}
});