Як мені визначити, не використовуючи 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в моєму випадку (Chrome)
Для отримання правильних результатів, беручи до уваги такі речі, як можливість межі, горизонтальної смуги прокрутки та / або плаваючої кількості пікселів, вам слід використовувати ...
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');
}
});