如何确定用户是否滚动到带有jQuery的HTML容器的末尾？ [英] How to find out if the user scrolled to the end of a HTML container with jQuery?

问题描述

如何查看用户是否向上滚动到底部或向下滚动到底部？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/

非常感谢！

Pat

解决方案

您可以测试滚动位置通过比较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个像素。

how do I find out if the user scrolled up to the top or down to the bottom in a scrollable container?

Does jQuery offer any mechanisms?

css:

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

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

Thanks a lot!

Pat

解决方案

You can test the scroll position by comparing the height, scrollable height and scroll offset of the 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
This example has reserved 5 pixels from the top and bottom of the div's margin.

这篇关于如何确定用户是否滚动到带有jQuery的HTML容器的末尾？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！