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

scrollHeightプロパティを試しましたか？

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

于 2012-06-18T21:14:27.723 に答える
1

を使用$('#dialog ul')[0].scrollHeightして要素のスクロールの高さを取得し、実際の高さを差し引いて$('#dialog ul').outerHeight(true);、ユーザーが一番下までスクロールしたことを確認します。

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

デモ

これはコンソールログの内容です（毎回下矢印をクリックします）

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

最後に、とは両方ともscroll250heightです。これはログには表示されませんが、手動で確認すると表示されます。

$('#dialog').scrollTop();
250
于 2012-06-18T21:12:23.603 に答える
0

誰もが気づいたように、を使用する必要がありますscrollHeight。
しかし、デモには別の問題があります。

#dialog ul{
    height:150px;
}

そしてもちろん$('#dialog ul').outerHeight(true)、$('#dialog ul').innerHeight()そしてさらに$('#dialog ul')[0].scrollHeightは150に等しくなります。

オーバーフローした要素のscrollHeightを確認する必要があるため、$('#dialog')[0].scrollHeight

于 2012-06-18T21:20:41.793 に答える