关于JQuery实现滚动到底部自动加载中应当注意的地方

Posted 2020-10-14

在滚动到底部自动加载时常常用到以下代码

container.bind(‘scroll‘, function(){
    if(container.scrollTop() + container.height() >= container.prop("scrollHeight")){
         loadNextPage();
    }
});

其中container.prop("scrollHeight") 就相当于 container.get(0).scrollHeight 用于获取container的真实高度，这个真实高度包括了被滚动条卷起来的部分

但是应当注意的是，如果container处于未显示状态（比如被设计到了一个tab中，display=none），那么用scrollHeight是无法获取container的高度的！

类似的，使用getBoundingClientRect方法获取的值也都是 0。

即 getBoundingClientRect和scrollHeight只能在元素显示情况下使用，这在设计tab下的滚动加载，以及搜索自动补全下拉框等模块时应当注意。