Cách kiểm tra xem thanh cuộn có ở dưới cùng

Question

Làm cách nào để kiểm tra xem thanh cuộn có được đặt ở dưới cùng không? Sử dụng JQuery hoặc JavaScript

Answer 1

Bạn tìm chiều cao của vùng chứa cuộn, sau đó so sánh với vị trí cuộn. Nếu chúng giống nhau, thì bạn đã đạt tới đáy.

<div style="overflow: auto; height: 500px"> 
</div> 

$(document).ready(function() 
{ 
    $('div').scroll(function() 
    { 
     var div = $(this); 
     if (div.height() == div.scrollTop() + 1) //scrollTop is 0 based 
     { 
      alert('Reached the bottom!"); 
     } 
    }); 
}); 

Edit: một thử nghiệm nhỏ trong một fiddle js và tôi nhận ra các phiên bản trước là không chính xác. Bạn có thể sử dụng một tài sản DOM để tìm ra bao nhiêu di chuyển có một thực hiện một chút toán với chiều cao của phần tử như vậy

 var div = $(this); 
     if (div[0].scrollHeight - div.scrollTop() == div.height()) 
     { 
      alert('Reached the bottom!'); 
     } 

http://jsfiddle.net/Aet2x/1/

Answer 2

Bạn có thể kiểm tra nếu các yếu tố scrollTop bằng phần tử innerHeight.

if($('div').scrollTop() == $('div').innerHeight()){ 
    //Reached the bottom 
} 

Answer 3

này làm việc cho tôi (sử dụng jQuery):

$(document).ready(function(){ 
    $('div').scroll(function(){ 
    //scrollTop refers to the top of the scroll position, which will be scrollHeight - offsetHeight 
    if(this.scrollTop == (this.scrollHeight - this.offsetHeight)) { 
     console.log("Top of the bottom reached!"); 
    } 
    }); 
}); 

Taken từ here.