如何找出如果用户滚动使用jQuery一个HTML容器的结束?(How to find out if

2019-09-21 13:33发布

我怎么发现如果用户在滚动容器滚动到顶部或下到谷底?

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:

您可以测试滚动位置比较高度,滚动的高度和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);
    });
});

小提琴
本实施例中已经保留了来自div的边缘的顶部和底部5个像素。



Answer 2:

$('#somediv').scrollTop()

会告诉你从顶部位置

-编辑-

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


Answer 3:

是的,你可以访问当前滚动顶部滚动容器的价值。

在这里工作是的jsfiddle。

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


文章来源: How to find out if the user scrolled to the end of a HTML container with jQuery?