如何找出用戶是否用jQuery滾動到HTML容器的末尾？

Question

如何查看用戶是否滾動到可滾動容器的頂部或底部？

jQuery是否提供任何機制？

CSS：

#container { 
    display: block; 
    width: 250px; 
    height: 25px; 
    background: green; 
} 
#scrolling { 
    width: 250px; 
    height: 300px; 
    backround: red; 
    overflow: auto; 
} 

http://jsfiddle.net/Hmaf2/2/

非常感謝！

帕特

Answer 1

可以測試滾動位置by comparing高度，可滾動的高度和的div滾動偏移量：

$(document).ready(function(){ 
    $('#scrolling').scroll(function(){ 
     var scrollTop = $(this).scrollTop(); 
     var iheight = $(this).innerHeight(); 
     var sheight = this.scrollHeight; 
     var text = ''; 
     if (scrollTop <= 5) { 
      text = 'top'; 
     } 
     else if (scrollTop+5 >= sheight-iheight) { 
      text = 'bottom'; 
     } 
     else { 
      text = scrollTop+' middle ('+iheight+','+sheight+')'; 
     } 
     $('#result').text(text); 
    }); 
}); 

fiddle
這個例子保留5個像素從頂部和div邊緣的底部。

Answer 2

$('#somediv').scrollTop() 

會告訴你從頂部

CNC中

$('#somediv').scroll(function(){ 
    if($('#somediv').scrollTop()==0){ 
     console.log('top') 
    } 
}) 

Answer 3

是的，你可以訪問一個可滾動容器的當前scroll top值的位置。

Here working is jsFiddle.

$('#scrolling').scroll(function() { 
    var scrollTop = $(this).scrollTop(); 
    console.log(scrollTop); 
});​