loadMore

构造函数 update 版~（加入监听某个div中的滚动到底啦~）

function LoadMoreUpdate(config){
    this.el = config.el || '';
    this.cb = config.cb || function(){};
    this.loading = false;
    loadMoreUpdate.prototype.toEnd = function(){
        var scrollTop = this.el.scrollTop || document.body.scrollTop,
            pageHeight = this.el ? this.el.getBoundingClientRect().height : window.innerHeight,
            scrollHeight = this.el ? this.el.scrollHeight : document.body.scrollHeight;
        if(scrollTop + pageHeight > scrollHeight - 5) {
            if(this.loading) return;
            this.loading = true;
            this.cb();
        }
    }
    loadMoreUpdate.prototype.open = function(){
        this.listener = this.toEnd.bind(this);
        this.el ? this.el.addEventListener('scroll', this.listener, false) : window.addEventListener('scroll', this.listener, false);
    }
    loadMoreUpdate.prototype.close = function(){
        this.el ? this.el.removeEventListener('scroll', this.listener, false) : window.removeEventListener('scroll', this.listener, false);
    }
}

// 使用时：
var i = 0;
function addDIV(){
  setTimeout(function(){
    i++;
    //...
    SE.loading = false;
    if( i === 3) SE.close();
  },1000)
}
var SE = new LoadMoreUpdate(addDIV);
SE.open();

observer 版本:

// IntersectionObserver的下拉刷新
function observeLoadMore(el, cb) {
    this.el = el;
    this.isLoading = false;
    var option = {
        threshold: 0
    }
    this.observer =  new IntersectionObserver(() => {
      if(this.isLoading) return;
      else {
        this.loading = true;
        cb();
      }
    }, option);
    observeLoadMore.prototype.bind = () => this.observer.observe(this.el);
    observeLoadMore.prototype.unbind = () => this.observer.unobserve(this.el);
}

-----update:

React 版本：

/* 上拉加载的方法 */
const scrollMethod = () => {
    if (loading || loadingMore || !containerRef || !containerRef.current) {
        return;
    }

    if (containerRef.current.scrollHeight - containerRef.current.scrollTop <= containerRef.current.clientHeight + threshold) {
        loadMore();
    }
};

// 如果不用 ref，而用之前的 useCallbak，在某些情况下会出问题，造成拿到的 loading 不是最新的。
const scrollMethodRef = useRef(scrollMethod);
scrollMethodRef.current = scrollMethod;

/* 如果有 ref，则会上拉加载更多 */
useEffect(() => {
    if (!containerRef || !containerRef.current) {
        return () => {};
    }

    const scrollTrigger = () => scrollMethodRef.current();
    containerRef.current.addEventListener('scroll', scrollTrigger);

    return () => {
        if (containerRef && containerRef.current) {
            containerRef.current.removeEventListener('scroll', scrollTrigger);
        }
    };
}, [scrollMethodRef]);