1

与我使用它来检测用户何时向下浏览整个页面的方式相同：

 $(window).scroll(function(){
    var diff = $(window).scrollTop() + $(window).height() - $(document).height();
    if  ($(window).scrollTop() == $(document).height() - $(window).height()   || (diff < 5 && diff > -5)){
           console.log('yay!');
    }
 });

我想在对话框中做同样的事情，

我正在尝试这样：

$('#dialog').dialog();
$('#dialog').scroll(function(){
     var scroll = $('#dialog').scrollTop();
    var height = $('#dialog ul').outerHeight(true);
    if(scroll == height){
         $('#dialog').css('background','#999');
    }else{
        console.log('scrolltop is '+scroll+' and height is: '+height);
    }
})

演示：

http://jsfiddle.net/AgFXz/

我猜的问题是我没有检索整个#dialog 大小，而是可见（CSS 定义的属性）大小..

我怎么知道用户何时滚动到对话框滚动结束？

谢谢！！

4

3 回答 3

1

Use $('#dialog ul')[0].scrollHeight to get the scroll height of the element and then subtract the actual height $('#dialog ul').outerHeight(true); to know when the user has scrolled to the bottom.

var height = $('#dialog ul')[0].scrollHeight - $('#dialog ul').outerHeight(true);

DEMO

This is what the console log says (I click the down arrow each time)

scrolltop is 40 and height is: 250
scrolltop is 80 and height is: 250
scrolltop is 120 and height is: 250
scrolltop is 160 and height is: 250
scrolltop is 200 and height is: 250
scrolltop is 240 and height is: 250

At the end, both scroll and height are 250. This doesn't show in the log but if you check it manually you'll see.

$('#dialog').scrollTop();
250
于 2012-06-18T21:12:23.603 回答
1

Have you tried scrollHeight property?

https://developer.mozilla.org/en/DOM/element.scrollHeight

于 2012-06-18T21:14:27.723 回答
0

正如每个人都注意到的那样，您应该使用scrollHeight.
但是您的演示中还有另一个问题：

#dialog ul{
    height:150px;
}

当然$('#dialog ul').outerHeight(true)，$('#dialog ul').innerHeight()甚至$('#dialog ul')[0].scrollHeight等于 150。

你需要检查溢出元素的滚动高度，所以使用$('#dialog')[0].scrollHeight

于 2012-06-18T21:20:41.793 回答