前端学习笔记：使用原生JS实现“上拉加载更多”的功能

使用场景

常用于移动端的分页加载，例如淘宝京东的推荐更多商品，搜索页面的更多结果等等。一图说明：

主要难点

• 如何使用CSS画出loading图标
• 如何使用JS触发上拉刷新事件

画loading图标

做之前一直以为图标画起来会很麻烦,事实证明非常简单,只需要两步：

1、画一个没有底部border的圆环

.icon-loading {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #ddd;
    border-bottom: none;
    background: transparent
}

2、让它动起来

.icon-loading {
    animation: rotate 0.7s infinite
}
@keyframes
rotate {
    0% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(180deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

画出来的效果

监测底部上拉事件

原理：监测浏览器的滚动事件，只要滚动的距离（即scrollTop）和页面的显示高度（即windowHeight）大于等于整个文档的高度（即scrollHeight），就意味着页面滑到了底部，触发了上拉事件。即：

window.addEventLisetner("scroll", function() {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
    let windowHeight = window.innerHeight;
    let scrollHeight = document.body.scrollHeight;
    if (scrollTop + windowHeight >= scrollHeight) {
        //上拉加载更多
        ajaxReq()
    }
})

function ajaxReq() {
    
}

这里面有几个坑。

第一个坑，不同浏览器的scrollTop计算方式不一样。要解决这个兼容性问题，百度出来的结果是这样的，不知道对不对。

let scrollTop = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;

其中document.body.scrollTop为未指定文档类型时的滚动高度，document.documentElement.scrollTop为指定文档类型为html时的滚动高度，window.pageYoffset为safari浏览器的滚动高度。

第二个坑，浏览器无法准确计算到达页面的底部。最开始我的判断条件是：

window.addEventListener("scroll", function() {
    if (scrollTop + windowHeight === scrollHeight) {
    //触发上拉事件
    }
})

发现事件始终没法触发，在控制台打印了一下这些变量，发现始终没有触发等于条件。于是恍然大悟，将===改成了>=，顺利解决了问题。

不过，这样带来了一个不大不小的bug：在页面滑到底部以后向上滑动一段距离，也会触发对应的事件。虽然不会影响大局，但总是美中不足。目前这个问题个人没有找到好的解决方案，期待大家的解答。

个人困惑

浏览器为什么无法准确计算到达页面的底部？