scroll more ideas

[dave-wind]

Scroll more hook

思路很简单,判断页面是否到底

1. 页面滚动 肯定需要知道滚动多少吧? 浏览器提供了 该api:
DOM对象的scrollTop用于获取或者设置一个元素里滚动的距离（垂直方向)
eg:  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
⚠️注: scrollTop 不仅获取当前页面的滚动高度，也可以获取某个DOM元素的滚动距离.
eg: document.querySelector('.content').scrollTop
2. 整个页面滚动 有一个值是固定的, 就是视窗高度: 
window.innerHeight
3. 那整个页面多高呢?不断加载数据 这个html高度会不断累加:
const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;

4. 所以思路很简单: 当滚动条+视窗 大于 页面高度 就到底了,而且我们可以加个缓冲值 提前判断加载数据
const distance = 100
 if (scrollTop + windowHeight + distance >= scrollHeight) {
      console.log(‘loadmore’)
  }

5.监听滚动 还是需要 addEventListener 

6. 我们可以加上节流函数 优化性能, hooks 写法:
    useEffect(() => {
        const cb = throttle(() => {
            const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
            const windowHeight = window.innerHeight;
            const distance = 100;
            if (scrollTop + windowHeight + distance >= scrollHeight) {
                console.log('end');
                loadmore();
            }
        }, 200);

        window.addEventListener('scroll', cb, false);
        return () => {
            window.removeEventListener('scroll', cb, false);
        }
    }, []);

function loadmore(){
    if (isLoading.current || !isMore.current) {  return }
       // to do fetch
}

⚠️注: 这里 loadmore 异步加载数据 方法 有俩状态 需要用户自己判断 一个是数据 loading状态 还有一个是接口返回的是否还有更多状态