Как определить без использования jQuery или любой другой библиотеки JavaScript, прокручен ли div с вертикальной полосой прокрутки до конца вниз?
Мой вопрос не в том, как прокрутить вниз. Я знаю, как это сделать. Я хочу определить, прокручен ли уже div вниз.
Это не работает:
if (objDiv.scrollTop == objDiv.scrollHeight)
Ответы:
Вы довольно близки к употреблению scrollTop == scrollHeight.
scrollTop относится к верхней части позиции прокрутки, которая будет scrollHeight - offsetHeight
Ваш оператор if должен выглядеть так (не забудьте использовать тройное равенство):
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
ПРИМЕЧАНИЕ. Вы ДОЛЖНЫ использовать clientHeight вместо offsetHeight, если хотите получить правильные результаты. offsetHeight даст вам правильные результаты только тогда, когда el не имеет границы или горизонтальной полосы прокрутки
@scroll="scrolling"затем в методах scrolling(event) { event.target // as el in the answer }Удачи
Немного поздно для этой вечеринки, но ни один из приведенных выше ответов, похоже, не работает особенно хорошо, когда ...
Чтобы учесть все обстоятельства, вам нужно округлить вычисленную позицию прокрутки в большую сторону:
Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight
Возвращает true, если элемент находится в конце прокрутки, и false, если это не так.
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');
}
});