一张图带来的思考

110 阅读1分钟

image.png

  1. 文档的总高度

document.body.clientHeight

  1. 元素到文档顶部的高度

div.offsetTop

  1. 可视区域高度

document.documentElement.clientHeight

  1. 滚动上去看不到的高度

document.documentElement.scrollTop

懒加载逻辑

判断图片元素距离顶部的距离是否在可视区域内 img.offsetTop<=document.documentElement.clientHeight 如果该条件成立则将src路径填充(向后端请求图片加载)

虚拟列表加载逻辑

向上滑动时判断当前应该加载第几组数据,这个拿document.documentElement.scrollTop判断我的起点是第几个索引,然后拿这个索引往下切割几个元素(可视区域高度除以每个item的高度),一般大于这个值会感觉丝滑点。