Làm cách nào để xác định, mà không cần sử dụng jQuery hoặc bất kỳ thư viện JavaScript nào khác, nếu một div có thanh cuộn dọc được cuộn xuống dưới cùng?
Câu hỏi của tôi không phải là làm thế nào để cuộn xuống dưới cùng. Tôi biết làm thế nào để làm điều đó. Tôi muốn xác định xem div đã được cuộn xuống dưới cùng chưa.
Điều này không hoạt động:
if (objDiv.scrollTop == objDiv.scrollHeight)
Câu trả lời:
Bạn đang sử dụng khá gần scrollTop == scrollHeight.
scrollTop đề cập đến vị trí đầu cuộn, sẽ là scrollHeight - offsetHeight
Câu lệnh if của bạn sẽ trông giống như vậy (đừng quên sử dụng ba dấu bằng):
if( obj.scrollTop === (obj.scrollHeight - obj.offsetHeight))
{
}
Chỉnh sửa: Đã sửa câu trả lời của tôi, hoàn toàn sai
scrollTopcó thể là không tích phân, vì vậy điều này đòi hỏi một số dung sai (giả sử obj.scrollHeight - obj.offsetHeight - obj.scrollTop < 1) để hoạt động trong mọi trường hợp. Xem stackoverflow.com/questions/5828275/…
document.body.scrollHeightbằng document.body.offsetHeighttrong trường hợp của tôi (Chrome)
Để có được kết quả chính xác khi tính đến những thứ như khả năng có đường viền, thanh cuộn ngang và / hoặc số lượng pixel nổi, bạn nên sử dụng ...
el.scrollHeight - el.scrollTop - el.clientHeight < 1
LƯU Ý: Bạn PHẢI sử dụng clientHeight thay vì offsetHeight nếu bạn muốn nhận được kết quả chính xác. offsetHeight sẽ chỉ cung cấp cho bạn kết quả chính xác khi el không có đường viền hoặc thanh cuộn ngang
@scroll="scrolling"sau đó trong các phương pháp scrolling(event) { event.target // as el in the answer }Chúc may mắn
Đến bữa tiệc này hơi muộn, nhưng không có câu trả lời nào ở trên dường như hoạt động đặc biệt hiệu quả khi ...
Để phù hợp với tất cả các trường hợp, bạn sẽ cần làm tròn vị trí cuộn được tính toán:
Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight
Trả về true nếu một phần tử nằm ở cuối cuộn của nó, false nếu không.
element.scrollHeight - element.scrollTop === element.clientHeight
document.body.scrollHeightvà document.bodyclientHeightcó cùng giá trị và do đó, biểu thức không bao giờ đúng.
<!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>
Nó hoạt động cho tôi, tôi hy vọng, điều này cũng sẽ giúp bạn. Cảm ơn.
Chà, tôi cũng tự hỏi mình như vậy, và tôi đã tìm ra cách này, ở đây tôi đặt một ví dụ bằng cách sử dụng một sự kiện:
let scrollableElement = document.querySelector(".elementScrollable")
scrollableElement.addEventListener("scroll",function(event){
if(event.target.scrollTop === event.target.scrollTopMax){
console.log("The scroll arrived at bottom")
}
})
Cái này phù hợp với tôi. Một chút cách tiếp cận khác.
if (list.scrollTop + list.clientHeight >= list.scrollHeight - 1) {
return 'scrollOnTheBottom';
}
Giải pháp tôi tìm thấy trên https://www.geeksforgeeks.org/how-to-detect-when-user-scrolls-to-the-bottom-of-a-div/ Phù hợp với tôi, hy vọng nó cũng sẽ hiệu quả với bạn .
$(window).on('scroll', function() {
if ($(window).scrollTop() >= $(
'.div').offset().top + $('.div').
outerHeight() - window.innerHeight) {
alert('You reached the end of the DIV');
}
});