如何确定用户是否使用 jQuery 滚动到 HTML 容器的末尾？答案

【问题标题】：How to find out if the user scrolled to the end of a HTML container with jQuery?如何确定用户是否使用 jQuery 滚动到 HTML 容器的末尾？
【发布时间】：2012-08-19 03:12:35
【问题描述】：

如何确定用户在可滚动容器中是向上滚动还是向下滚动？

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/

非常感谢！

拍拍

【问题讨论】：

标签： javascript jquery html css scroll

【解决方案1】：

$('#somediv').scrollTop()

会告诉你从上到下的位置

-编辑-

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

【讨论】：

【解决方案2】：

是的，您可以访问可滚动容器的当前 scroll top 值。

Here working is jsFiddle.

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

【讨论】：

Here is a jsFiddle with console.log opened ready.

【解决方案3】：

可以测试滚动位置by comparingdiv的高度、可滚动高度和滚动偏移量：

$(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
此示例从 div 的边距的顶部和底部保留了 5 个像素。

【讨论】：

太棒了！这正是我需要的解决方案！