页面无限滚动实现原理

前端无限滚动一般指元素滚动到最后,动态加载更多数据。实现原理大只如下:
假设outer为外层容器, 则当滚动条滚动到最低端时

outer.scrollHeight  = outer.scrollTop + outer.offsetHeight;  

我们希望滚动到快到底部时触发加载,可以为outer添加滚动监听,当差值小于10像素时加载新数据, 其中注意滚动到小于10像素后会连续多次触发滚动事件,所以注意事件的节流处理(一个函数未执行完不再执行第二次),以下是一个简单示例:




    
    
    
    Document
    


    

你可能感兴趣的:(页面无限滚动实现原理)