目前的需求:当前组件向上滚动加载数据,dom加载完后,页面的元素位置不能发生变化
遇到的问题:加载完数据后,又把滚轮滚到之前记录的位置时,内容发生闪动
现在的方案:
加载数据之前记录整体滚动条的高度,数据加载完之后把滚动条滚动到之前数据所在的位置;
方案是没有问题,但是特别不友好!dom加载完了之后滚动还是在最上方,页面就会出现内容的变化(显示新加载出来的数据),这时候再滚动到之前元素的位置还会再次出现内容的变化,(这里我尝试过禁用滚轮事件,但是内容撑开后滚轮还是会变)
重点来了!
这时候就需要使用到 requestAnimationFrame API, 这个API是跟着浏览器的刷新频率来计算的,大概就是一秒60次,它会在下一次渲染之前进行回调
举例说明:刷新之前滚轮高度是500,刷新完dom之后是1200
->>>>>>开始滚动获取数据
->>>>>>开始滚动条高度记录500
->>>>>>获取完数据更新完dom(此时浏览器还没有渲染,但是滚动条高度是1200)
->>>>>>执行requestAnimationFrame回调,把滚动条滚动到刷新之前元素的位置 1200 - 500
->>>>>>渲染
这时候就可以做到很平滑的加载数据!!!!